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-projectyarn 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 技术周刊 #
「技术周刊」是社区特地推出的技术内容系列，一周一主题。
每周二更新，欢送「关注」。大家也能够在评论处留言本人感兴趣的主题，举荐主题相干的优良文章。
如有问题能够增加小姐姐微信~