webpack5性能优化

开发优化

• 使用html-webpack-plugin 自动引入打包资源
• 通过 eslint 格式化代码
• babel处理 js 文件设置缓存（cacheDirectory）
• loader 都可以设置缩小扫描范围的规则（include/exclude）
• 开启 sourcemap 帮助我们快速定位问题
• 使用 oneOf 解决 rules 匹配性能浪费的问题
• 使用 thread-loader 多进程打包

生产优化

• 资源文件打包 base64

  {
    test: /\.(png|jpe?g|gif|webp|svg)$/,
    type: 'asset', 
    parser: {
      dataUrlCondition: {
        maxSize: 4 * 1024 // 4kb 以下打包base64
      }
     }
  }
  

• css文件的单独提取（1. 单独提取利用浏览器并行加在机制，2. 可以使用 splitchunk 减少重复引用导致的代码冗余）

  const MiniCssExtractPlugin = require("mini-css-extract-plugin");
  

• css 样式的兼容性处理（使用了postcss）

  npm install postcss-loader postcss postcss-preset-env -D
  ... 具体配置流程详见 4.
  

• css 样式压缩

  npm install css-minimizer-webpack-plugin --save-dev
  

• 使用 babel 对 js 代码进行兼容性处理（简单的）

• babel 使用 runtime 解决辅助代码重复的问题

• 使用 core-js 处理 esnext 不能被 es5 转化的语法糖

• 开启 sourcemap 帮助我们快速定位问题

• 利用 webpack 提供的 tree-shaking （esm）

• Tree-shaking 字面意思就是 摇晃树， 其实就是去除那些引用的但却没有使用的代码。
  Tree-shaking 概念最早由Rollup.js 提出，后来在webpack2中被引入进来，但是这个这一特性能够被支持得益于ES6 modules的静态特性。ES6的模块声明相比于传统CommonJS的同步require有着本质区别。这种modules设计保证了依赖关系是提前确定的，使得静态分析成为了可能，与运行时无关,记住，如果使用babel的话，需要关闭babel的modules配置,“modules”: false 的含义是关闭 Babel 的模块转换功能，保留原本的 ES6 模块化语法
  

• 图片压缩（详见 10.）

• splitchunk 帮我们自动扫描重复引用（自定义模块和第三方依赖），单独打包

• splitchunk 帮我们对动态导入语法实现单独打包

• 打包输出文件命名规则整理，结合 runtimeChunk，（帮助我们充分利用浏览器缓存）

• // 添加 contenthash 当内容发生变化的时候加载新的资源
  output: {
      filename: '[name].[contenthash:8]js', // 正常 js 打包文件
      chunkFilename: '[name].chunk.[contenthash:8].js', // splitchunk 单独打包的文件增加一个.chunk标识
      assetModuleFilename: 'static/[hash:8][ext]', // 通过 'type: asset' 这种方式打包的资源文件
      path: path.join(__dirname, 'dist'),
      clean: true,
  },
    
  plugins: [new MiniCssExtractPlugin({
      filename: 'static/css/[name].[contenthash:8].css', // 指定输出目录
    	// 多次引入同一个 css 文件也可能单独打包 css 文件
    	chunkFilename: 'static/css/[name].chunk.[contenthash:8].css', // splitchunk 单独打包的文件增加一个.chunk标识
  })],
  

• preload 和 prefetch（按需加载），可以根据产品提供的用户埋点数据分析什么地方更适合使用这些性能优化的点