ESM与Vite

在手写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))

image.png

当增加了type="module"属性后，就可以使用ESM的语法了，浏览器此时可以正常运行

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成熟。