webpack性能优化

184 阅读1分钟

优化开发体验

  • 提升效率
  • 优化构建速度
  • 优化使用体验

优化输出质量

  • 优化要发布到线上的代码,减少用户等待的时间
  • 提升代码性能,性能好执行就快

  1. 缩小文件范围
  2. 优化resolve.modules配置
  3. 优化resolve.alias配置
  4. 优化resolve.extensions配置 
  5. 使用静态资源路径CDN
  6. css文件处理
  7. 借助MiniCssExtractPlugin 完成抽离css 
  8. 压缩css、html
  9. 优化文件监听性能
  10. 区分development vs Production模式打包
  11. tree Shaking摇树,清除⽆无⽤用 css,js(Dead Code)
    1. css
    2. js
    副作用:
  12. 代码分割 code Splitting
  13. DllPlugin插件打包第三⽅方类库 优化构建性能 
  14.  HardSourceWebpackPlugin HardSourceWebpackPlugin 
  15. 使⽤用happypack并发执⾏行行任务