webpack性能优化

webpack打包优化一般可以从拆包、分块、压缩等方面考虑。

1.speed-measure-webpack-plugin分析打包速度

// 导入速度分析插件
const SpeedMeasurePlugin = require("speed-measure-webpack-plugin");

// 实例化插件
const smp = new SpeedMeasurePlugin();

module.exports = {
  configureWebpack: smp.wrap({
    plugins: [
      // 这里是项目里需要使用到的其他插件
    ]
  })
}

运行打包命令，可以显示打包总耗时

2.webpack-bundle-analyzer体积分析

// 导入速度分析插件
const SpeedMeasurePlugin = require("speed-measure-webpack-plugin");

// 导入体积分析插件
const BundleAnalyzerPlugin = require("webpack-bundle-analyzer").BundleAnalyzerPlugin;

// 实例化速度分析插件
const smp = new SpeedMeasurePlugin();

module.exports = {
    configureWebpack: smp.wrap({
        plugins: [
            // 实例化体积分析插件
            new BundleAnalyzerPlugin()
        ]
    })
}

3.thread-loader优化解析时间

把这个loader放在其他loader之前，在其后面的loader就会在一个单独的woker池运行，开启多线程提高解析速度。

// 导入速度分析插件
const SpeedMeasurePlugin = require("speed-measure-webpack-plugin");

// 实例化插件
const smp = new SpeedMeasurePlugin();
module.exports = {
    configureWebpack: smp.wrap({
        module: {
            rules: [
                {
                    test: /\.js$/,
                    exclude: /node_modules/,
                    use: ['thread-loader', 'babel-loader']
                },
                {
                    text: /\.less$/,
                    exclude: /node_modules/,
                    use: [
                        'style-loader',
                        'thread-loader',
                        'css-loader',
                        'less-loader',
                    ]
                }
            ]
        }
    })
}

备注：thread-loader要放在style-loader之后，原因是thread-loader后的loader没法存取文件，也没法获取webpack的选项配置。

4.terser-webpack-plugin 压缩优化代码

压缩代码并使用多进程来并行运行提高构建速度。

import { Configuration } from 'webpack';

// 导入代码压缩插件
const TerserPlugin = require("terser-webpack-plugin");

const config: Configuration = {
   optimization: {
      minimizer: [
         new TerserPlugin({
              parallel: true // 或者数字
         })
      ]
   }
}

5.cache-loader优化二次打包时间

在性能开销比较大的loader加这个loader，将结果缓存到磁盘。

import { Configuration } from 'webpack';

import { resolve } from 'path'

const config: Configuration = {
   module: {
      rules: [
         {
            test: /\.js$/,
            exclude: /node_modules/,
            use: ['cache-loader', 'thread-loader', 'babel-loader'],
            include: resolve('src')
         },
      ]
   }
}