构建系列之前端脚手架 vite
本系列旨在总结现如今大前端的构建体系及覆盖各流程节点的工具链相关知识。
前言
前端技术整体还处于增长期，前端各技术框架的也卷着各位前端开发人员，本人最近新接触了一个 vue 项目，这是一个新的项目，项目的技术选型也比较追随当前技术潮流，比如工程的脚手架用的就是 vite，于是就有了本篇文章，话不多说咱们直奔主题。
Vite 简介
在前端脚手架的工具链上我们见证了诸如 webpack、Rollup 和 Parcel 等工具的变迁，它们极大地改善了前端开发者的开发体验。
但随着我们项目的复杂度提升，代码量也越来越膨胀，在构建应用时，相应的工具需要处理的 JavaScript 代码量也呈指数级增长。包含数千个模块的大型项目相当普遍。基于 JavaScript 开发的工具就会开始遇到性能瓶颈：通常需要很长时间（甚至是几分钟！）才能启动开发服务器，即使使用模块热替换（HMR），文件修改后的效果也需要几秒钟才能在浏览器中反映出来。如此循环往复，迟钝的反馈会极大地影响开发者的开发效率和幸福感。
vite 就是为解决上述问题而衍生的，也就是所谓的价值牵引，技术驱动的精髓所在。vite 官网介绍其为下一代前端开发与构建工具，能显著提升前端开发体验。
Vite 原理深入浅出
开发阶段
Vite 利用前端生态系统中的新技术解决上述问题，其利用原生 ES 模块和动态 ESM 模块，以便根据需要将代码注入浏览器。本质上，项目中的每次导入都会强制浏览器根据需要加载每个有效负载。这些导入将级联以获得特定情况下所需的所有代码。
此外，基于打包器启动时，重建整个包的效率很低。原因显而易见：因为这样更新速度会随着应用体积增长而直线下降。所以打包器支持了动态模块热替换（HMR）：允许一个模块 “热替换” 它自己，而不会影响页面其余部分。然而事与愿违，部分项目即使采用了 HMR 模式，其热更新速度也会随着应用规模的增长而显著下降。
在 Vite 中，HMR 基于原生 ESM 上实现的。当更改一个文件时，Vite 只需要精确地使已更改的模块与其最近的 HMR 区域失效即可（寻找最小的 dirty 区域），使得无论应用大小如何，HMR 始终能保持快速更新。
Vite 同时利用 其他一些浏览器支持的技术能力来加速整个页面的重新加载，比如源码模块的请求会根据 304 Not Modified 进行协商缓存，而依赖模块请求则会通过 Cache-Control: max-age=31536000,immutable 进行强缓存。
最终，Vite 的 HMR 技术使你能够在开发时获得即时的启动速度，这会大大提高开发体验。
index.html
main.js
index.html 是入口文件，当项目启动时它会将 main.js 文件作为原生 ES 模块发送到浏览器，让浏览器接管了打包程序的部分工作。
构建阶段
首先我们要明确 vite 在开发阶段并没有真正的打包项目，而是靠浏览器的打包能力完成应用启动的，但是在生产环境中我们需要考虑网络节点的覆盖能力，网络基础设施不同带来的网络带宽压力等等复杂情况，为了获得最佳的加载性能，我们还需要将代码进行编译和加载优化，比如 tree-shaking、懒加载和 chunk 分割（以获得更好的缓存）。
所以 vite 提供了一套构建指令，它使用 rollup(内置的打包程序)打开我们的代码，并且它是预配置的，可以输出生产环境的优化过的静态资源。
vue-config.js
sourcemap和outDir都直接传递给 Rollup 进行配置。配置文件中的选项可以让开发人员在必要时对 Rollup 进行深入配置来实现不同场景下的业务需求。
实践
初始
第一步：npm create vite@latest 第二步：npm create vite@latest my-vue-app --template vue
Vite 项目中默认的 npm scripts
处理 css、less、ts
新建 css 文件只要 html 导入了就可以运行新建 less 文件只要 npm install less -D 安装一下就行了
新建 ts 文件只要 main.js 导入这个 ts 了就可以运行
插件配置
新建 vite.config.js
打包
第一次 vite 启动项目时，vite 会把使用的依赖集合起来放到 node_module/.vite 里下次再起项目时，不用从 node_module 里找，从而加快项目启动过程。
vite build 会对项目做打包，生成 dist/文件夹。
总结
本文根据最近的 vite 学习实践进行了总结，对核心的技术原理深入浅出，后面有机会的话会进行深入分析和横向对比，敬请期待。欢迎欢迎强烈欢迎各位大佬关注公众号：江湖修行。
版权声明: 本文为 InfoQ 作者【江湖修行】的原创文章。
原文链接:【http://xie.infoq.cn/article/9c66386c4d083becb55424518】。
本文遵守【CC-BY 4.0】协议，转载请保留原文出处及本版权声明。
还未添加个人签名 2021-12-05 加入
还未添加个人简介
评论