webpack性能优化分析

1. 优化原理和目标

诊断并分析性能瓶颈，有针对性的提升构建速度和用户的访问性能

诊断方法：

• 构建速度：提升团队开发效率

• 构建体积：提升页面访问速度

优化方案：

• 使用多线程优化构建速度

• 使用分包减少构建体积

• 减少构建目标提升构建速度

2. 分析构建速度-测量插件 speed-measure-webpack-plugin

https://github.com/stephencookdev/speed-measure-webpack-plugin

介绍：

显示每个loader和plugin的执行时间，将比较耗时的用红色标记出来

安装：

npm install speed-measure-webpack-plugin -D

使用：

const SpeedMeasurePlugin = require("speed-measure-webpack-plugin");
const smp = new SpeedMeasurePlugin();
const webpackConfig = smp.wrap({
    plugins: [new MyPlugin(), new MyOtherPlugin()],
});

3. 构建体积检测插件 webpack-bundle-analyzer

https://github.com/webpack-contrib/webpack-bundle-analyzer

介绍：

webpack-bundle-analyzer是webpack的插件，需要配合webpack和webpack-cli⼀起使⽤。这个插件可以读取output⽂件夹中的stats.json⽂件，把该⽂件可视化展现，⽣成代码分析报告，可以直观地分析打包出的⽂件有哪些，及它们的⼤⼩、占⽐情况、各⽂件 Gzipped 后的⼤⼩、模块包含关系、依赖项等。

安装：

npm install --save-dev webpack-bundle-analyzer

使用：

const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin
module.exports = {
    plugins: [new BundleAnalyzerPlugin()]
}

通过分析图可以帮助我们：

• 了解bundle包中真正的内容

• 找出哪些模块尺寸最大

• 查找误引入的模块

• 优化项目

4. 构建性能优化之多进程 thread-loader

4.1 多进程 thread-loader

https://github.com/webpack-contrib/thread-loader

介绍：

Webpack的构建过程涉及到⼤量的⽂件读写操作，系统的I/O操作是⼗分耗时的，当要操作的⽂件数量变多的时候，Webpack的构建速度也会相应的变慢。由于JavaScript是单线程运⾏的，只能⼀个⼀个的排队处理任务，不能同时处理多个任务。像Java那样使⽤多线程进⾏任务处理显然是不可能的，因此thread-loader使⽤多进程来并发去处理任务，⼦进程处理完成后将结果再返回给主进程，从⽽提升了构建效率。

注意：

• thread-loader应该放到其他loader前

• 每个 worker 都是⼀个独⽴的 node.js 进程，其开销⼤约为 600ms 左右。同时会限制跨进程的数据交换。

• 请仅在耗时的操作中使⽤此 loader

运行在worker池中的loader的限制：

• 不能生成新的文件

• 不能使用自定义的loader API (也就是说，不能通过插件来自定义)

• 无法获取webpack的配置

安装：

npm install --save-dev thread-loader

使用：

module.exports = {
    module: {
        rules: [
            {
                test: /\.js$/,
                include: path.resolve('src'),
                use: [
                        'thread-loader',
                        // your expensive loader (e.g babel-loader)
                     ],
                   },
               ],
           },
 };

4.2 多进程-并行压缩- tenser-webpack-plugin

https://github.com/webpack-contrib/terser-webpack-plugin

使用：开启parallel参数

5. 分包和模板的自动引用

分包：在 webpack 打包过程中，经常出现 vendor.js， app.js 单个⽂件较⼤的情况，这偏偏⼜是⽹⻚最先加载的⽂件，这就会使得加载时间过⻓，从⽽使得⽩屏时间过⻓，影响⽤户体验。因此我们需要将打包⽂件进⼀步优化 - 分包。把变化⼏率很⼩的第三⽅库抽离出来，提前打包好，使⽤DllPlugin进⾏分包。

分包原则：

• 降低单个包的文件大小

• 将第三方库分离出来

实现步骤：

• 分包：定义webpack.dll.js，使用DllPlugin配置分包

const path = require('path')
const webpack = require('webpack')

module.exports = {
  mode: 'production',
  entry: {
    react: [
      'react',
      'react-dom'
    ]
  },
  output: {
    filename: '[name].dll.js',
    path: path.join(__dirname, 'dll'),
    library: '[name]_[hash]'
  },
  plugins: [
    new webpack.DllPlugin({
      name: '[name]_[hash]',
      path: path.join(__dirname, 'dll/[name]-manifest.json'),
    })
  ]
}

• 排除分包：在config中，使用DllReferencePlugin引用manifest文件排除分包

plugins: [
    new webpack.DllReferencePlugin({
      context: __dirname,
      manifest: path.resolve(__dirname, './dll/react-manifest.json')
    }),
  ]

• 引用dll：使用add-asset-html-webpack-plugin引用分包文件

https://github.com/SimenB/add-asset-html-webpack-plugin

注意：

SpeedMeasurePlugin和AddAssetHtmlPlugin一起使用，会导致dll.js文件自动导入失败，所以，在使用AddAssetHtmlPlugin的时候，将SpeedMeasurePlugin的disable改为true

new AddAssetHtmlPlugin({
  filepath: path.resolve(__dirname, './dll/react.dll.js'),
  publicPath: '', // 否则在html中引入的的路径会有一个auto
})

6. 使用缓存提升打包性能

https://webpack.docschina.org/configuration/cache/#root

目的： 提升二次构建速度

思路：

• babel-loader 开启缓存

• 设置cache选项

6.1 babel-loader 开启缓存

  {
      loader: 'babel-loader',
        options: {
          cacheDirectory: true
        }
      }
  }

6.2 设置cache选项

cache: {
    type: 'filesystem',
    allowCollectingMemory: true,
  },

7. 缩小构建目标

目的：缩小构建目标 (比如 babel-loader 不解析 node_modules)

7.1 babel-loader 只解析src

  {
        test: /.js$/,
        include: path.resolve('src'),
        use: [
          {
            loader: 'thread-loader',
            options: {
              workers: 3,
            }
          },
          {
            loader: 'babel-loader',
            options: {
              cacheDirectory: true
            }
          }
        ]
      }, 

7.2 修改resolve的参数

resolve: {
    alias: {
      'react': path.resolve(__dirname, './node_modules/react/umd/react.production.min.js'),
      'react-dom': path.resolve(__dirname, './node_modules/react-dom/umd/react-dom.production.min.js')
    },
    extensions: ['.js'],
    mainFields: ['main']
  }

8. 图片压缩 image-minimizer-webpack-loader

https://github.com/webpack-contrib/image-minimizer-webpack-plugin/

9. CSS优化 purgecss-webpack-plugin

https://github.com/FullHuman/purgecss/tree/main/packages/purgecss-webpack-plugin

介绍：

在⼤型项⽬中，经常会有很多样式内容，在代码中根本未使⽤，但是会被打包，这些样式在打包时应该 移除。 使⽤purgecss-webpack-plugin移除未使⽤的css样式

使用：

const { PurgeCSSPlugin } = require("purgecss-webpack-plugin")
const PATHS = {
  src: path.join(__dirname, "src"),
}
plugins: [
    new PurgeCSSPlugin({
      paths: glob.sync(`${PATHS.src}/**/*`, { nodir: true }),
    })
]

注意：purgecss-webpack-plugin需要和mini-css-extract-plugin一起使用

10. 使用高版本的webpack和node.js

更高版本的webpack和nodejs，性能更加优越

上述是针对webpack5的性能优化分析，如有错误之处，请指正～