面试题：Webpack与Angular集成下的深层次依赖优化

使用webpack-alias配置别名：
- 在Webpack的配置文件（通常是webpack.config.js）中，利用alias字段。如果已知正确版本的C库路径，可以这样配置：
```
const path = require('path');
module.exports = {
    // 其他配置...
    resolve: {
        alias: {
            'C$': path.resolve(__dirname, 'path/to/correct/version/of/C')
        }
    }
};
```
- 这里的C$表示精确匹配C库，确保Webpack总是从指定路径引入正确版本的C库，避免引入其他版本。
使用npm-force-resolutions：
- 在项目根目录的package.json中添加如下字段：
```
{
    "resolutions": {
        "C": "desired - version - of - C"
    }
}
```
- 然后运行npm install，这会强制npm安装指定版本的C库，无论其他库对C库的依赖要求如何。
优化依赖树：
- Tree - shaking：
  - 确保项目使用ES6模块语法（import和export）。Webpack默认会对ES6模块进行Tree - shaking，去除未使用的代码。
  - 在Webpack配置中，确保mode设置为'production'，因为生产模式下Webpack会自动启用一些优化，包括更激进的Tree - shaking。例如：
```
module.exports = {
    mode: 'production',
    // 其他配置...
};
```
- Scope Hoisting：
  - 安装@babel/plugin - proposal - module - concatenation插件（如果项目使用Babel）。
  - 在Babel配置文件（.babelrc或babel.config.js）中添加：
```
{
    "plugins": ["@babel/plugin - proposal - module - concatenation"]
}
```
  - 在Webpack配置中，启用ModuleConcatenationPlugin：
```
const webpack = require('webpack');
module.exports = {
    // 其他配置...
    plugins: [
        new webpack.optimize.ModuleConcatenationPlugin()
    ]
};
```
  - Scope Hoisting可以将多个模块合并成一个，减少模块间的函数调用开销，从而优化打包体积和加载时间。
- Code Splitting：
  - 使用Webpack的动态导入（import()语法）进行代码拆分。例如，如果有一些不常用的功能模块，可以这样拆分：
```
// 主文件
document.getElementById('btn').addEventListener('click', function () {
    import('./lazy - loaded - module').then(module => {
        module.doSomething();
    });
});
```
  - 在Webpack配置中，splitChunks可以进一步优化公共代码的提取。例如：
```
module.exports = {
    // 其他配置...
    optimization: {
        splitChunks: {
            chunks: 'all'
        }
    }
};
```
  - 这会将所有模块中的公共代码提取出来，避免重复打包，减少整体打包体积，提高加载性能。

星途面试题库

面试题：Webpack与Angular集成下的深层次依赖优化

知识考点

面试题答案