面试题：Webpack懒加载中如何配置代码分割实现按需加载

实现代码分割与懒加载的配置和插件

配置splitChunks：在Webpack的optimization选项中配置splitChunks。

module.exports = {
    optimization: {
        splitChunks: {
            chunks: 'all'
        }
    }
};

- `chunks`：指定要分割的chunk类型，`'all'`表示所有类型的chunk（`initial`、`async`和`all`三个可选值），`async`只分割异步chunk，`initial`只分割入口chunk。

2. 使用import()语法：在代码中使用动态import()来实现懒加载。例如：

// 懒加载一个模块
const loadModule = async () => {
    const { someFunction } = await import('./module.js');
    someFunction();
};

插件：MiniCssExtractPlugin可以将CSS从JavaScript中分离出来，也间接有助于代码分割和优化。

const MiniCssExtractPlugin = require('mini-css-extract-plugin');
module.exports = {
    module: {
        rules: [
            {
                test: /\.css$/,
                use: [MiniCssExtractPlugin.loader, 'css-loader']
            }
        ]
    },
    plugins: [
        new MiniCssExtractPlugin()
    ]
};

代码分割配置中的主要参数含义

minSize：默认值为30000（30kb），表示被提取的chunk最小大小，小于该值不会被提取。例如：

splitChunks: {
    minSize: 20000 // 20kb
}

maxSize：默认无限制，若设置该值，当生成的chunk大小超过该值时，Webpack会尝试将其再拆分。
minChunks：默认值为1，表示被提取的chunk至少被多少个chunk引用才会被提取。例如：

splitChunks: {
    minChunks: 2
}

name：指定提取出来的chunk的名称，可设置为字符串或函数。例如：

splitChunks: {
    name: 'common'
}

cacheGroups：可以对不同类型的模块进行更细粒度的代码分割。例如：

splitChunks: {
    cacheGroups: {
        vendor: {
            test: /[\\/]node_modules[\\/]/,
            name:'vendors',
            chunks: 'all'
        }
    }
}

- `test`：通过正则表达式指定匹配哪些模块，上述例子匹配`node_modules`中的模块。
- `name`：提取出来的chunk的名称。
- `chunks`：指定适用的chunk类型。

面试题：Webpack懒加载中如何配置代码分割实现按需加载

知识考点

面试题答案

实现代码分割与懒加载的配置和插件

代码分割配置中的主要参数含义