使用webpack5中的thread-loader和内置的Cache机制提高编译速度

开发模式状态下，影响编译速度的因素

查看webpack打包后各个模块的大小

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

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

当前webpack编译速度

npm install simple-progress-webpack-plugin --save -dev

const webpack = require('webpack')
const SimpleProgressWebpackPlugin = require( 'simple-progress-webpack-plugin' )
module.exports = {
    webpack: {
        plugins: [
            new SimpleProgressWebpackPlugin()
              ]
};

影响编译速度的因素

node是单线程，项目中的每个module只能依次打包
对同一模块被多次引用重复打包

使用webpack5的Cache对项目进行缓存

使用webpack5的thread-loader进行多线程打包

const path = require('path')
const CracoLessPlugin = require('craco-less')
const AntdDayjsWebpackPlugin = require('antd-dayjs-webpack-plugin')
const AntDesignTheme = require('./src/styles/antd/antd-theme.json')
const CracoEsbuildPlugin = require('craco-esbuild')
const { ProvidePlugin } = require('webpack')
const WebpackBarPlugin = require('webpackbar')
module.exports = {
  style: {
    css: {
      loaderOptions: {
        modules: {
          compileType: 'module',
          mode: 'local', 
          auto: true,
          exportGlobals: true,
          localIdentName: '[path][name]__[local]--[hash:base64:5]',
          localIdentContext: path.resolve(__dirname, 'src'),
          exportLocalsConvention: 'camelCase',
          exportOnlyLocals: false,
        },
      },
    },
    postcss: {
      plugins: [require('tailwindcss'), require('autoprefixer')],
    },
  },
  babel: {
    plugins: [
      [
        'transform-imports',
        {
          transform: 'lodash/${member}',
          preventFullImport: true,
        },
      ],
    ],
  },
  webpack: {
    plugins: [
      new AntdDayjsWebpackPlugin(),
      new ProvidePlugin({
        React: 'react',
      }),
      new WebpackBarPlugin(),
    ],
    cache: {
      type: 'filesystem',
      allowCollectingMemory: true
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        include: path.resolve('src'),
        use: [
          {
            loader: 'thread-loader',
            options: {
                workers: 8
            }
        },
        {
            loader: 'babel-loader'
        }
          // your expensive loader (e.g babel-loader)
        ],
      },
    ],
  },
  },
  plugins: [
    {
      plugin: CracoLessPlugin,
      options: {
        lessLoaderOptions: {
          lessOptions: {
            // antd them custom
            modifyVars: AntDesignTheme,
            javascriptEnabled: true,
          },
        },
      },
    },
    {
      plugin: CracoEsbuildPlugin,
    },
  ],
}