前端性能优化-静态资源优化10-构建工具

本文地址：https://www.cnblogs.com/veinyin/p/14274312.html

1 常用构建工具

1. grunt

   最早出现，写脚本的形式处理开发过程中的代码压缩、合并

   一个项目需要定制多个小任务和引入多个插件，grunt 会执行这一个一个完成构建

   插件质量参差不齐，要注意甄别

2. gulp

   grunt 之后出现，通过流（stream）简化多个任务间的配置和输出，配置文件相对减少，简化配置操作

3. webpack

   采用预编译，中间文件在内存里处理，比放在缓存目录下更有优势

   支持多种模块化，常用模块化都支持

   配置相对简单，相对更加流行

2 提升 webpack 打包效率

1. 定位体积大的模块（对大模块一一拆解甚至拆除，输出的打包文件就会减小）

2. 删除没有使用的依赖（可能前期使用，但后续未使用，需删除）

3. 生产模式进行公共依赖包抽离（避免多次加载公共依赖，后续只需加载业务代码）

4. 开发模式进行 DLL & DllReference 方式优化（框架级别的抽离）