面试题：Angular项目创建后的Webpack定制与性能调优

1. 定制Webpack

1.1 添加自定义Loader

安装Loader：首先通过npm或yarn安装所需的loader，例如如果要处理Sass文件，需安装sass - loader、node - sass。

npm install sass - loader node - sass --save - dev

配置angular.json：在architect.build下的webpack.extra.js指定自定义Webpack配置文件路径（需先创建此文件）。然后在webpack.extra.js中配置loader，例如处理Sass的配置如下：

const path = require('path');

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

1.2 添加自定义Plugin

安装Plugin：通过npm或yarn安装，例如安装html - webpack - plugin来生成HTML文件。

npm install html - webpack - plugin --save - dev

配置Webpack：在webpack.extra.js中引入并使用插件，示例如下：

const HtmlWebpackPlugin = require('html - webpack - plugin');

module.exports = {
    plugins: [
        new HtmlWebpackPlugin({
            template: './src/index.html',
            filename: 'index.html'
        })
    ]
};

1.3 代码压缩

安装压缩插件：使用terser - webpack - plugin压缩JavaScript代码，optimize - css - assets - plugin压缩CSS代码。

npm install terser - webpack - plugin optimize - css - assets - plugin --save - dev

配置Webpack：在webpack.extra.js中配置，示例如下：

const TerserPlugin = require('terser - webpack - plugin');
const OptimizeCSSAssetsPlugin = require('optimize - css - assets - plugin');

module.exports = {
    optimization: {
        minimizer: [
            new TerserPlugin({}),
            new OptimizeCSSAssetsPlugin({})
        ]
    }
};

1.4 图片处理

安装Loader：安装image - webpack - loader来优化图片，可压缩图片等。

npm install image - webpack - loader --save - dev

配置Loader：在webpack.extra.js中配置：

module.exports = {
    module: {
        rules: [
            {
                test: /\.(png|jpg|gif)$/,
                use: [
                    {
                        loader: 'image - webpack - loader',
                        options: {
                            mozjpeg: {
                                progressive: true,
                                quality: 65
                            },
                            // optipng.enabled: false will disable optipng
                            optipng: {
                                enabled: false
                            },
                            pngquant: {
                                quality: [0.65, 0.90],
                                speed: 4
                            },
                            gifsicle: {
                                interlaced: false
                            },
                            // the webp option will enable WEBP
                            webp: {
                                quality: 75
                            }
                        }
                    }
                ]
            }
        ]
    }
};

1.5 懒加载策略调整

Angular的懒加载：Angular本身支持路由懒加载，通过loadChildren配置路由即可。例如：

const routes: Routes = [
    {
        path: 'lazy - loaded - module',
        loadChildren: () => import('./lazy - loaded - module/lazy - loaded - module.module').then(m => m.LazyLoadedModuleModule)
    }
];

Webpack懒加载相关配置：Webpack的splitChunks配置可进一步优化懒加载，在webpack.extra.js中配置：

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

2. 不同生产环境下的性能调优

2.1 开发环境

快速构建：使用webpack - serve替代webpack - cli，它具有实时重载功能，提升开发效率。

npm install webpack - serve --save - dev

调试方便：设置devtool: 'eval - source - map'，在webpack.extra.js中配置如下：

module.exports = {
    devtool: 'eval - source - map'
};

2.2 测试环境

接近生产构建：构建配置与生产环境类似，但可以保留更多调试信息。例如设置devtool: 'cheap - module - source - map'。

module.exports = {
    devtool: 'cheap - module - source - map'
};

代码质量检查：添加eslint - webpack - plugin等插件进行代码质量检查。

npm install eslint - webpack - plugin --save - dev

在webpack.extra.js中配置：

const ESLintPlugin = require('eslint - webpack - plugin');

module.exports = {
    plugins: [
        new ESLintPlugin()
    ]
};

2.3 生产环境

极致压缩：启用前面提到的代码压缩插件，并将压缩配置调至最优。如TerserPlugin的compress选项可进一步优化。

module.exports = {
    optimization: {
        minimizer: [
            new TerserPlugin({
                compress: {
                    drop_console: true // 移除console.log
                }
            })
        ]
    }
};

资源缓存：使用webpack - hash - output - plugin等插件对输出文件添加哈希值，实现浏览器缓存控制。

npm install webpack - hash - output - plugin --save - dev

在webpack.extra.js中配置：

const WebpackHashOutputPlugin = require('webpack - hash - output - plugin');

module.exports = {
    plugins: [
        new WebpackHashOutputPlugin()
    ]
};

Tree - shaking：确保mode设置为'production'，Webpack会自动启用Tree - shaking，移除未使用的代码。在angular.json的architect.build下设置"mode": "production"。

面试题：Angular项目创建后的Webpack定制与性能调优

知识考点

面试题答案

1. 定制Webpack

1.1 添加自定义Loader

1.2 添加自定义Plugin

1.3 代码压缩

1.4 图片处理

1.5 懒加载策略调整

2. 不同生产环境下的性能调优

2.1 开发环境

2.2 测试环境

2.3 生产环境