共计 2052 个字符，预计需要花费 6 分钟才能阅读完成。
Vite 是一种前端构建工具，可能显著晋升前端开发体验。它次要由两局部组成：
- 一个开发服务器，它基于 原生 ES 模块 提供了 丰盛的内建性能，如速度快到惊人的 模块热更新（HMR）。
- 一套构建指令，它应用 Rollup 打包你的代码，并且它是预配置的，可输入用于生产环境的高度优化过的动态资源。
Vite 意在提供开箱即用的配置，同时它的 插件 API 和 JavaScript API 带来了高度的可扩展性，并有残缺的类型反对。
本期技术周刊一起理解下这个前端构建工具 Vite，欢送大家浏览 ～
文章举荐
以下是专栏板块对于 Vite 的相干文章
《【Vite 实际】Vite 库模式能满足你吗？或者你须要对立构建》作者：Samon
因为没有特地好的叫法，自己暂且把这叫做对立构建，自己把对立构建演绎为如下构建：
Bundle 构建
即 Vite（也是 Rollup）的库打包模式，单输出文件，单输入 bundle 文件，如果没有设置内部依赖（external）所有波及的依赖包都会打包到一个 bundle 文件中。
长处：反对 umd 格局，浏览器中可作为内部依赖，不受业务代码 bundle 影响，可利用浏览器缓存机制，进步加载性能。
毛病：不反对 Tree Shaking 没有应用到的代码也会加载进来，因为打包到一个 bundle 文件，本地源码可读性差。
《【应用 Vite 构建工具疾速创立 Vue 我的项目（Vue3.0 我的项目开发）》作者：TANKING
本文将进行该项目标开发和公布。目前的 Vue 版本是 3.0.4，通过 Vite 的打包，就能够部署到服务器进行公布。
组件化开发
vue 我的项目的长处就是组件化开发，将每个性能、或者是每个页面、容器分成各个组件，一方面是便于保护，另一方面是多人开发的时候也是能够提高效率。能够减少代码的复用性、可维护性和可测试性。进步开发效率，不便重复使用，简化调试步骤，晋升整个我的项目的可维护性，便于协同开发，是高内聚、低耦合代码的实际。
代码目录中的 components 目录就是组件的目录，在这里能够依据本人的我的项目去创立各个组件，间接在组件外面写 html 代码、以及调用 vue 的 api 去实现很多性能，例如 axios 网络申请，同时，组件内也能够写 css 款式。
《Vite 多页面利用配置 & 应用 vite-plugin-html 向 html 模板注入数据或标签》作者：老猫抽旱烟
在开发过程中，简略地导航或链接到 /nested/ – 将会按预期工作，与失常的动态文件服务器体现统一。
也就是说，如果你的文件夹有如下层级：
{
src: {
pages: {
demo1: {
App.vue
main.ts
},
demo2: {
App.vue
main.ts
},
demo1.html
demo2.html
}
}
}那么通过 vite 的开发服务器拜访你的页面，须要拜访 localhost:3000/src/pages/demo1.html#/index 这样的链接，打包后 index.html 也会呈现在 dist/src/pages 文件夹下，很不不便。
《vite — 超快且不便的编译工具》作者：一颗冰淇淋
咱们编写的代码，比方 ES6、TypeScript、react 等是不能被浏览器间接辨认的，须要通过 webpack、rollup 这样的构建工具来对代码进行转换、编译。
但随着我的项目越来越大，须要解决的资源越来越多，构建工具也须要很长的工夫能力开启服务，因而产生了新型的前端构建工具 Vite，能够晋升编译速度和缩小构建配置。
《实现一个打包时将 CSS 注入到 JS 的 Vite 插件》作者：Name6
Vite 在 2.0 版本提供了 Library Mode（库模式），让开发者能够应用 Vite 来构建本人的库以公布应用。正好我筹备封装一个 React 组件并将其公布为 npm 包以供日后方便使用，同时之前也体验到了应用 Vite 带来的疾速体验，于是便应用 Vite 进行开发。
《应用 vite 脚手架创立 vue3 我的项目配置 eslint+stylelint》作者：曹飞龙
应用 vite 的脚手架创立一个我的项目
yarn create vite装置 Eslint 包
cd vite-project yarn add yarn add eslint -D配置 eslint
npx eslint --init
问题举荐
对于 Vite 的问题，欢送正在浏览的小伙伴们一起来解决！
- 如何让 Vite 热更新, 而不是间接刷新整个页面?
- Vite 的环境变量文件是否替换为 json 或 js？
- vite+vue3 如何配置能够让浏览器间接拜访 public 上面的文件？
- 用 vite 打包 vue3 配置重载胜利，但浏览器不能主动刷新？
- vite-plugin-imp 应用之后 console.log 行数谬误?
- vite 应用函数生成 proxy 配置，dev 模式下失常，打包后却不失效？
- vite 打包，如何配置让所有浏览器应用兼容版的 chunk？
# SegmentFault 技术周刊 #
「技术周刊」是社区特地推出的技术内容系列，一周一主题。
每周二更新，欢送「关注」。大家也能够在评论处留言本人感兴趣的主题，举荐主题相干的优良文章。
如有问题能够增加小姐姐微信~