在手写webpack中，我已经介绍过webpack的构建原理，它是一个需要构建一个完整的bundle.js后，才能使模块在浏览器运行的构建工具。所以它构建打包是需要花费时间的，当项目体积很大时，这个等待时间就会比较耗时了。
snowpack / vite 等基于 ESM的构建⼯具出现，让项⽬的⼯程构建不再需要构建⼀个完整的 bundle。由此，很多⼈都觉得我们不再需要打包⼯具的时代即将到来。可以借助浏览器 ESM 的能⼒，⼀些代码基本可以做到⽆需构建直接运⾏。
Vite(读⾳类似于[wɪt]，法语，快的意思) 是⼀个由原⽣ ES Module 驱动的 Web 开发构建⼯具。在开发
环境下基于浏览器原⽣ ESM开发，在⽣产环境下基于 Rollup 打包
什么叫基于ESM？
ES Module是ES6推出的模块化方案，它支持使用import、export语法直接导入、导出模块，让其可以在浏览器上直接运行
// src/add.js
// ES6语法
export default (a, b) => a + b;
// src/index.js
// ES6语法
import add from './add.js'
console.log(add(1,3))
<body>
<!-- 直接导入时，会报错，不能在module模块外使用import语句 -->
<script src="./index.js"></script>
</body>
image.png
当增加了type="module"属性后，就可以使用ESM的语法了，浏览器此时可以正常运行
<body>
<!-- 增加type="module"后，就可以使用了 -->
<script src="./index.js" type="module"></script>
</body>
image.png
这就是上面所说的基于浏览器支持
ESM的原理。
vite有什么特点？
- 闪电般的冷启动速度
- (HMR)即时热模块更换（热更新）
- 真正的按需编译
- 极简的输出结果代码，tree-shaking非常强大
但要使用它，是要基于以下要求的：
- 要求项⽬完全由 ES Module 模块组成
- common.js 模块不能直接在 Vite 上使⽤（可以使用插件，但还不太友好）
- 打包上依旧还是使⽤ rollup 等传统打包⼯具
Webpack与Vite对比
- Vite特点： 轻量、按需打包rollup 、HMR (热渲染依赖）
- Webpack：由于需要预先编译打包所以启动速度慢，但⽣态成熟。
对⽐：
- webpack :
强调对web开发的⽀持，尤其是内置了HMR的⽀持，插件系统⽐较强⼤，对各种模块系统兼
容性最佳(amd,cjs,umd,esm等，兼容性好的有点过分了，这实际上有利有弊,导致⾯向webpack编程），有丰富的⽣态，缺点是产物不够⼲净，产物不⽀持⽣成esm格式， 插件开发上⼿较难，不太适合库的开发。 - rollup
强调对库开发的⽀持，基于ESM模块系统，对tree shaking有着良好的⽀持，产物⾮常⼲净，⽀持多种输出格式，适合做库的开发，插件api⽐较友好，缺点是对cjs⽀持需要依赖插件，且⽀持效果不佳，需要较多的hack，不⽀持HMR，做应⽤开发时需要依赖各种插件。 - esbuild
强调性能，内置了对css、图⽚、react、typescript等内置⽀持，编译速度特别快（是webpack和rollup速度的100倍+),缺点是⽬前插件系统较为简单，⽣态不如webpack和rollup成熟。
网友评论