构建流程
此过程是串行过程
- 初始参数
- 对参数去加载所有配置中的一个插件，执行方法
- 确定入口 entry
- 编译模块，调用所有的loader
- 模块编译，循环递归后，使用loader的编译完所有模块
- 输出资源，根据入口和模块的依赖关系组装多个churk成单一的文件
性能优化
- 查找范围缩小，从而提升它的查找效率 alias: extenstions
- 减少需要解析的文件； noparse
- 避免重复编译的第三方库： 如echarts单独打包
- 压缩过程中开启多个子进程： js、css、ts等loader
webpack优化
- 将按需加载代码，在使用的时候加载
- 优化静态资源：svg图标，使用cdn加载（减少服务器压力）
- 代码切割，使用code spliting将代码进行分割，避免所有代码打包成一个文件
loader、plugin的区别
- loader运行在打包文件之前，plugin在整个编译周期
- loader在module.rules中的配置，类型为数组；plugin单独配置，每一项是一个plugin实例
vite比webpack打包更快的原因：
** vite启动到结束的流程
- 使用esbuild预构建依赖，提前将项目的第三方依赖格式化为ESM模块
- 启动一个node服务
- 打开浏览器，去访问index.html
- 基于浏览器已经支持原生的esm模块，逐步去加载入口文件以及入口文件的依据
快：
- vite不需要做全量打包
- 按需加载，模块之间的依赖关系的解析由浏览器实现
- 充分利用缓存：vite利用http头来加载整个页面
