DingMing

丁大铭的个人空间,用来分享一些前端小技巧,默默成长吧,哈哈

webpack性能优化

  |  
 阅读次数

一、优化构建速度

  1. 缩小文件的搜索范围
    • resolve字段告诉webpack怎么去搜索文件
    • module.noParse字段告诉Webpack不必解析哪些文件,可以用来排除对非模块化库文件的解析
    • 配置loader时,通过test、exclude、include缩小搜索范围
  2. 使用DllPlugin减少基础模块编译次数
  3. 使用HappyPack(已弃用),thread-loadaer 开启多进程Loader转换
  4. 使用ParallelUglifyPlugin开启多进程压缩JS文件

二、优化输出质量-压缩文件体积

  • 区分环境–减小生产环境代码体积
  • 压缩代码-JS、ES、CSS
    • 压缩JS:Webpack内置UglifyJS插件、ParallelUglifyPlugin
    • 压缩ES6:第三方UglifyJS插件
    • 压缩CSS:css-loader?minimize、PurifyCSSPlugin
  • 使用Tree Shaking剔除JS死代码

三、优化输出质量–加速网络请求

  • 使用CDN加速静态资源加载
  • 多页面应用提取页面间公共代码,以利用缓存
  • 分割代码以按需加载

四、优化输出质量–提升代码运行时的效率

五、使用输出分析工具

进阶Webpack知识体系参考