面试题：Webpack高级难度：Webpack性能优化配置

优化Webpack构建速度

多线程构建：
- 使用thread-loader：
  - 安装thread-loader：npm install thread-loader -D。
  - 在Webpack配置中使用，例如：

module.exports = {
    module: {
        rules: [
            {
                test: /\.js$/,
                include: path.resolve(__dirname, 'src'),
                use: [
                    'thread-loader',
                    {
                        loader: 'babel-loader',
                        options: {
                            presets: ['@babel/preset - env']
                        }
                    }
                ]
            }
        ]
    }
};

 - `thread-loader`会将后面的loader分配到不同的worker池中并行执行，从而加快构建速度。它会在worker池中缓存编译结果，对于相同的输入，下次构建会直接使用缓存，进一步提升速度。

2. 优化resolve配置：

缩小模块搜索范围：
- 使用alias配置别名，例如：

module.exports = {
    resolve: {
        alias: {
            '@': path.resolve(__dirname, 'src')
        }
    }
};

 - 这样在导入模块时，`import {someFunction} from '@/utils'`，Webpack会直接到`src/utils`路径下查找，而不需要从`node_modules`等其他路径查找，加快查找速度。

设置extensions：

module.exports = {
    resolve: {
        extensions: ['.js', '.jsx', '.json']
    }
};

 - 当导入模块不写后缀名时，Webpack会按照`extensions`数组顺序依次尝试添加后缀名查找文件，合理设置可以避免不必要的查找。

3. 使用cache-loader：

安装cache-loader：npm install cache-loader -D。
在Webpack配置中使用，如：

module.exports = {
    module: {
        rules: [
            {
                test: /\.js$/,
                include: path.resolve(__dirname, 'src'),
                use: [
                    'cache-loader',
                    {
                        loader: 'babel-loader',
                        options: {
                            presets: ['@babel/preset - env']
                        }
                    }
                ]
            }
        ]
    }
};

cache-loader会将loader的执行结果缓存到磁盘，下次构建如果文件没有变化，直接使用缓存结果，加快构建。

优化产出包体积

代码拆分：
- 使用splitChunks：
  - 在Webpack配置中设置：

module.exports = {
    optimization: {
        splitChunks: {
            chunks: 'all',
            minSize: 30000,
            minChunks: 1,
            maxAsyncRequests: 5,
            maxInitialRequests: 3,
            automaticNameDelimiter: '~',
            name: true,
            cacheGroups: {
                vendors: {
                    test: /[\\/]node_modules[\\/]/,
                    priority: -10
                },
                default: {
                    minChunks: 2,
                    priority: -20,
                    reuseExistingChunk: true
                }
            }
        }
    }
};

 - `splitChunks.chunks`设置为`all`表示对所有类型的chunk（入口chunk和异步chunk）都进行拆分。`minSize`表示拆分出来的chunk最小字节数，`minChunks`表示至少被多少个chunk引用才拆分。`cacheGroups`可以对不同来源的模块进行分组拆分，例如`vendors`组专门拆分`node_modules`中的模块，这样可以将第三方库分离出来，实现缓存和并行加载。

2. Tree - shaking：

使用ES6模块：确保项目中使用ES6模块语法（import和export），因为Tree - shaking是基于ES6模块静态分析实现的。例如：

// utils.js
export const add = (a, b) => a + b;
export const subtract = (a, b) => a - b;

// main.js
import {add} from './utils.js';
console.log(add(1, 2));

配置mode为production：在Webpack配置中设置mode: 'production'，Webpack在生产模式下会启用内置的压缩插件（如TerserPlugin），这些插件会进行Tree - shaking优化，去除未使用的代码。例如：

module.exports = {
    mode: 'production'
};

使用sideEffects字段：在package.json中设置sideEffects字段，告知Webpack哪些模块有副作用（即除了导出值之外还有其他行为，如修改全局变量）。例如：

{
    "sideEffects": ["@babel/polyfill", "./src/styles.css"]
}

这样Webpack在Tree - shaking时可以更准确地判断哪些代码可以安全移除。

星途面试题库

面试题：Webpack高级难度：Webpack性能优化配置

知识考点

面试题答案

优化Webpack构建速度

优化产出包体积