面试题：Webpack生产环境配置之性能优化

代码压缩
- 原理：使用如TerserPlugin插件，它会分析和转换JavaScript代码，删除未使用的代码（dead code elimination）、缩短变量名等操作，以减小代码体积，加快加载速度。在Webpack配置中可如下配置：

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

提取公共代码
- 原理：利用splitChunks插件，Webpack可以分析入口chunk以及它们的依赖关系，将多个chunk中共同的模块提取出来，生成单独的chunk。这样在浏览器加载时，相同的代码只需加载一次，提高缓存利用率。配置示例：

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

图片优化
- 原理：使用image-webpack-loader等加载器，它会在构建过程中对图片进行压缩处理，通过有损或无损压缩算法，在保证图片视觉质量的前提下减小图片文件大小，从而加快页面加载。配置如下：

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
                            }
                        }
                    }
                ]
            }
        ]
    }
};

开启代码分割和懒加载
- 原理：Webpack的动态导入（import()语法）实现代码分割和懒加载。当使用动态导入时，Webpack会将导入的模块分割成单独的chunk，只有在实际需要时（例如用户操作触发某个功能时）才会加载该chunk，而不是在页面初始化时全部加载，从而提升首屏加载速度。示例代码：

// 懒加载一个模块
button.addEventListener('click', () => {
    import('./module.js').then(module => {
        module.doSomething();
    });
});

使用CDN
- 原理：将一些常用的第三方库（如React、Vue等）通过CDN（内容分发网络）引入。CDN服务器分布在全球各地，能够根据用户的地理位置快速提供资源。在Webpack中，可以通过配置externals，告诉Webpack这些库不在打包范围内，而是从CDN引入。配置如下：

module.exports = {
    externals: {
        'react': 'React',
        'react - dom': 'ReactDOM'
    }
};

然后在HTML中通过<script>标签引入CDN资源：

<script src="https://cdn.jsdelivr.net/npm/react@17.0.2/umd/react.production.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/react - dom@17.0.2/umd/react - dom.production.min.js"></script>

星途面试题库

面试题：Webpack生产环境配置之性能优化

知识考点

面试题答案