优化loader配置，配置 test ,include,exclude
terser-webpack-plugin ，开启缓存和多进程压缩
thread-loader 多线程构建
cache-loader 给loader 设置缓存

如何利用Webpack来优化前端性能

tree shaking
js css 压缩合并，图片压缩
抽离公共 js和css
模块懒加载
使用高版本的webPack 和node.js

打包文件大怎么解决

使用生产环境
压缩合并
treeshaking
抽离公共文件
模块懒加载

  • 多线程/多实例构建： thread-loader

  • 压缩代码

    1. 多线程并行压缩
      webpack-pralle-uglify-plugin
      terser-webpack-plugin开启parallel参数
  1. 通过mini-css-extract-plugin 提取Chunk中的css 代码到单独文件，通过css-loader

的minimize选项开启cssnano 压缩css

  • 图片压缩
  • 缩小打包作用域
  • 提取页面公共资源
  • DLL
  • 充分利用缓存提升二次构建速度
  • Tree shaking
  • Scope hoisting
  • 动态 Polyfill
  • 模块