优化 webpack5 打包

我写了一个 React 的小项目，我发现打包时间在 22 秒左右，对于一个小项目来说有点长。

所以我准备用 thread-loader 和 cache-loader 来优化。

但是由于 cache-loader 目前不支持 webpack5，而 webpack5 拥有自己的插件能实现持久缓存。

因此，我最后采用 thread-loader 实现并发处理，使用 cache 实现持久缓存

使用 thread-loader

// Module/Loaders configuration
    module: {
        rules: [
            {
                test: /\.(js|jsx|ts|tsx)$/,
                // exclude: /node_modules/,
                exclude: [
                    /node_modules/,
                    /server/,
                    /dist/
                ],
                // use: 'babel-loader',
                use: [
                    'thread-loader', // 并行处理
                    'babel-loader'
                ]
            },

注意：

• thread-loader 需要放在需要优化的、耗时的 loader 之前
• 不要忘记导包 npm install --save-dev thread-loader

使用 cache

const config = {
    cache: {
                type: 'filesystem',//开启持久缓存
                buildDependencies: {
                    config: [path.join(__dirname, 'webpack.config.js')],
                },
           },
};

module.exports = config;

buildDependencies 是为了使 webpack.config.js 发生变化时，使之前的缓存失效

结果

之前的打包 （消耗 22.94s）

在设置完后的第一次打包 （消耗 16.80s），这时 thread-loader 起作用，并且 cache 缓存一次

在设置完后的第二次打包 （消耗 2.92s)，这时资源文件没有变化，并且使用上一次的缓存