vite原理浅析-prd生产环境(对比rollup和webpack)
vite webpack rollup 构建工具
- 通过上篇我们可以知道，vite 在 dev 环境中 是不打包的（除了 node_modules 的依赖），解析模块的任务都交给浏览器处理了（高版本浏览器原生支持 esm 语法），语法要求是 esm
现在 prd 环境了，问题来了：
- prd 是否打包？如何打包？
- 打包出来的是哪种模块？
- 打包的产物对浏览器兼容性如何？
- 为什么 prd 打包选择 rollup，不用 webpack，或 esbuild？
- 为什么打包的文件比 webpack 小很多（高版本 webpack 也有 tree shaking）？
prd 是否打包？如何打包？
需要打包，使用 rollup 打包：https://rollupjs.org/guide/en/
打包出来的是哪种模块？
最低支持 es2015（也就是 esm） https://cn.vitejs.dev/guide/build.html#browser-compatibility
打包的产物对浏览器兼容性如何？
因为 vite build 目标还是使用 esm 模块，所以兼容性的根本是跟着 esm 模块的兼容性走的
- vite 的目标是 利用高版本浏览器原生支持 esm 的能力，这样的好处是，不用像 webpack 一样写大量的 polyfill 代码和 iife 那样的“丑结构”(深层次的原因 可以看“rollup 打包产物解析及原理（对比 webpack）” 有详细解释)
如果需要兼容 chorme63 以下的浏览器
- 参考官网解决办法：https://cn.vitejs.dev/guide/build.html#browser-compatibility
- 或 用 vite 开发 dev（热更新很爽），配置 webpack 打包生产包上线
为什么 prd 打包选择 rollup，不用 webpack，或 esbuild？
- esbuild 主要是打包 js 很快，但是生产包的是应用程序，除了.js 文件外，还会有很多其他的资源 如.css 图片 字体 等等。暂时 rollup 和 webpack 的生态更成熟
- esbuild 主要用在 dev 的预构建
- 为什么不用 webpack。可以参考”rollup 打包产物解析及原理（对比 webpack）”
简单的总结 rollup 好处的话是：
- 对比 esbuild：打包模块类型复杂的应用程序方面，生态更成熟
- 对比 webpack
- 打出来的包体积小
- 打出来的包结构清晰（不用像 webpack 一样，用 iife + function 包裹模块），几乎无额外代码注入。
- 符合 js 未来模块标准（esm）（webpack 暂时不支持打出 esm 的模块（实验中））
为什么打包的文件比 webpack 小很多（高版本 webpack 也有 tree shaking）？
可以参考 “rollup 打包产物解析及原理（对比 webpack）”