面试题：Webpack优化Angular项目的代码分割策略

代码分割策略及适用场景

Entry Points分割
- 策略：在webpack配置中，通过entry属性定义多个入口点。例如：

module.exports = {
    entry: {
        app: './src/app.js',
        vendor: './src/vendor.js'
    },
    // 其他配置...
};

- **适用场景**：适用于将应用代码和第三方库代码分离。这样浏览器可以分别缓存应用代码和第三方库代码，当应用代码更新时，第三方库代码的缓存仍然有效，减少重复下载。

2. 动态导入（import()） - 策略：在代码中使用动态导入语法import()。例如：

// 懒加载路由模块
const route = () => import('./routes/route.js');

- **适用场景**：常用于路由懒加载、按需加载组件等场景。只有在需要时才会加载相应的代码块，避免初始加载时加载过多不必要的代码，提升首屏加载速度。

3. SplitChunksPlugin分割 - 策略：Webpack的SplitChunksPlugin可以自动分割模块。默认配置下，它会将所有node_modules中的模块提取到一个单独的文件中。例如在Webpack配置中：

module.exports = {
    // 其他配置...
    optimization: {
        splitChunks: {
            chunks: 'all'
        }
    }
};

- **适用场景**：适用于提取多个模块中共享的代码，以及将第三方依赖提取出来，使这些代码能够被更好地缓存。

Webpack配置实现

安装相关依赖：确保webpack和webpack - cli已安装，对于Angular项目，Angular CLI已经集成了Webpack，但可能需要安装@angular - cli相关版本。
自定义Webpack配置：如果使用Angular CLI，可以通过@angular - cli - extra - webpack来扩展Webpack配置。首先安装：

npm install @angular - cli - extra - webpack --save - dev

然后在项目根目录创建webpack.extra.js文件，例如：

const path = require('path');

module.exports = {
    optimization: {
        splitChunks: {
            chunks: 'all',
            cacheGroups: {
                vendor: {
                    test: /[\\/]node_modules[\\/]/,
                    name:'vendors',
                    chunks: 'all'
                }
            }
        }
    }
};

最后在angular.json文件中添加：

{
    "architect": {
        "builder": "@angular - cli - extra - webpack:browser",
        "options": {
            "customWebpackConfig": {
                "path": "./webpack.extra.js"
            },
            // 其他原有配置...
        },
        // 其他原有配置...
    }
}

如果不使用Angular CLI，直接在Webpack配置文件（通常是webpack.config.js）中按照上述代码分割策略对应的配置方式进行配置即可。例如配置动态导入，只需在代码中正常使用import()语法，Webpack会自动处理代码分割；配置SplitChunksPlugin则按上述示例中的optimization.splitChunks配置。

星途面试题库

面试题：Webpack优化Angular项目的代码分割策略

知识考点

面试题答案

代码分割策略及适用场景

Webpack配置实现