优化webpack的打包体积

  • 压缩代码 ```javascript webpack-paralle-uglify-plugin

uglifyjs-webpack-plugin 开启parallel参数(不支持ES6)

terser-webpack-plugin 开启paraller参数

多进程并行压缩

通过 mini-css-extract-plugin 提取Chunk中的CSS代码到单独文件，通过 optimize-css-assets-webpack-plugin 插件，开启cssnano 压缩css

  2. - 提取页面公共资源
  3. ```javascript
  4. 使用 html-webpack-externals-plugin，将基础包通过CDN引入，不打入bundle中
  6. 使用SplitChunksPlugin进行(公共脚本、基础包、页面公共文件)分离(webpack4内置)，替代了 CommonsChunkPlugin 插件
  8. 基础包分离：将一些基础库放到cdn，比如vue、webpack配置 external 是vue的不打入bundle
  • Tree shaking ```javascript purgecss-webpack-plugin 和 mini-css-extract-plugin 配合使用(仅仅是建议)

打包过程中检测工程中没有引用过的模块并进行标记，在资源压缩时将它们从最终的bundle中去掉(只能对ES6 Module生效)开发中尽可能使用 ES6 Module 的模块，提高tree shaking的效率

禁用babel-loader的模块依赖解析，否则 webpack 接收到的就是转换过的commonJS形式的模块，无法进行tree shaking

使用 PurifyCSS(不在维护)或者uncss去除无用css代码


- Scope hoisting
```javascript
构建后的代码会存在大量闭包，造成体积增大，运行代码时创建的函数作用域变多，内存开销变大。Scope hoisting 将所有模块的代码按照引用顺序放在一个函数作用域里，然后适当的重命名一些变量以防止变量名冲突

必须是ES6的语法，因为有很多第三方库仍采用CommonJS 语法，为了充分发挥Scope hoisting 的作用，需要配置 mainFields 对第三方模块优先采用 jsnext:main 中指向的ES6模块化语法
  • 图片压缩 ```javascript 使用基于node库的imagemin(很多定制选项、可以处理多种图片格式)

配置 image-webpack-loader


- 动态Ployfill
```javascript
建议采用 polyfill-service 只给用户返回需要的polyfill，社区维护。

@babel-preset-env中通过useBuiltIns:"usage" 参数来动态加载polyfill
  • 借助工具分析性能瓶颈

speed-measure-webpack-plugin，简称SMP，分析出 webpack 打包过程中Loader和Plugin的耗时时，有助于找到构建过程中的性能瓶颈。