一、优化构建速度
- 缩小文件的搜索范围
- resolve字段告诉webpack怎么去搜索文件
- module.noParse字段告诉Webpack不必解析哪些文件,可以用来排除对非模块化库文件的解析
- 配置loader时,通过test、exclude、include缩小搜索范围
- 使用DllPlugin减少基础模块编译次数
- 使用HappyPack(已弃用),thread-loadaer 开启多进程Loader转换
- 使用ParallelUglifyPlugin开启多进程压缩JS文件
二、优化输出质量-压缩文件体积
- 区分环境–减小生产环境代码体积
- 压缩代码-JS、ES、CSS
- 压缩JS:Webpack内置UglifyJS插件、ParallelUglifyPlugin
- 压缩ES6:第三方UglifyJS插件
- 压缩CSS:css-loader?minimize、PurifyCSSPlugin
- 使用Tree Shaking剔除JS死代码
三、优化输出质量–加速网络请求
- 使用CDN加速静态资源加载
- 多页面应用提取页面间公共代码,以利用缓存
- 分割代码以按需加载
四、优化输出质量–提升代码运行时的效率
五、使用输出分析工具
进阶Webpack知识体系参考