面试题：Webpack如何配置以优化动态加载和按需加载的性能

代码分割插件

splitChunksPlugin：
- 配置示例：

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

性能优化作用：
- chunks: 'all'：表示对所有类型的chunk（入口chunk、异步chunk等）都进行代码分割。这样可以确保无论是初始加载还是动态加载的模块，都能得到合理的拆分。
- minSize: 30000：设定了最小分割大小为30000字节（约30KB）。避免了过小的文件被分割，减少请求数量，同时也不会让单个文件过大影响加载性能。
- minChunks: 1：表示被引用1次及以上的模块就可以被拆分出来。对于经常复用的模块，如第三方库，可以单独拆分，提高缓存利用率。
- maxAsyncRequests 和 maxInitialRequests：限制了同时加载的异步请求数和初始请求数，防止过多请求阻塞网络，优化网络性能。
- cacheGroups：通过定义不同的缓存组，将来自 node_modules 的模块拆分到 vendors 组，这样第三方库能被单独打包，浏览器可以更好地缓存它们。default 组则处理应用内的公共模块，reuseExistingChunk: true 可以复用已有的chunk，避免重复打包。

加载器配置

babel-loader：
- 配置示例：

module.exports = {
    module: {
        rules: [
            {
                test: /\.js$/,
                exclude: /node_modules/,
                use: {
                    loader: 'babel-loader',
                    options: {
                        presets: ['@babel/preset - env']
                    }
                }
            }
        ]
    }
};

性能优化作用：
- test: /\.js$/：指定该加载器处理 .js 文件。
- exclude: /node_modules/：排除 node_modules 目录，因为 node_modules 中的代码通常已经是经过编译的，不需要再次用 babel - loader 处理，提高编译速度。
- @babel/preset - env：根据目标运行环境自动转换ES6+代码到ES5，使代码能在更多浏览器中运行，同时它会根据配置的目标环境去除不必要的polyfill，减小打包体积。

css - loader 和 style - loader：
- 配置示例：

module.exports = {
    module: {
        rules: [
            {
                test: /\.css$/,
                use: ['style - loader', 'css - loader']
            }
        ]
    }
};

性能优化作用：
- css - loader：处理CSS文件中的 @import 和 url() 等引用，将CSS文件解析成模块。通过配置 minimize: true 可以开启CSS压缩，减小文件体积。
- style - loader：将CSS代码注入到DOM中。对于样式文件，采用按需加载的方式，例如在动态加载的组件中，只有在组件加载时才将其样式注入，避免初始加载时加载过多不必要的样式。

缓存策略

cache：
- 配置示例：

module.exports = {
    cache: {
        type: 'filesystem',
        cacheDirectory: path.resolve(__dirname, '.webpackcache'),
        buildDependencies: {
            config: [__filename]
        }
    }
};

性能优化作用：
- type: 'filesystem'：使用文件系统缓存，Webpack会将编译结果缓存到指定目录。下次构建时，如果模块没有变化，直接从缓存中读取，大大加快构建速度。
- cacheDirectory：指定缓存目录，便于管理和清理缓存。
- buildDependencies：配置构建依赖，这里将Webpack配置文件 __filename 作为依赖。当Webpack配置文件发生变化时，缓存会失效，重新构建，确保构建结果的正确性。

output.hash：
- 配置示例：

module.exports = {
    output: {
        filename: '[name].[contenthash].js',
        chunkFilename: '[name].[contenthash].chunk.js'
    }
};

性能优化作用：
- 使用 [contenthash] 会根据文件内容生成哈希值。当文件内容不变时，哈希值不变，浏览器可以继续使用缓存的文件。当文件内容改变，哈希值改变，浏览器会重新请求新的文件，保证用户获取到最新的代码，同时又能最大程度利用浏览器缓存。

星途面试题库

面试题：Webpack如何配置以优化动态加载和按需加载的性能

知识考点

面试题答案

代码分割插件

加载器配置

缓存策略