面试题：Vue项目中如何利用Webpack配置优化用户体验

代码拆分
- 策略：使用splitChunks插件。在Webpack配置中通过optimization.splitChunks进行配置。例如：

optimization: {
    splitChunks: {
        chunks: 'all'
    }
}

- **原理**：将代码按照一定规则（如入口、公共模块等）拆分成多个较小的文件。这样在浏览器加载页面时，就可以按需加载，而不是一次性加载整个应用的代码。例如，将常用的第三方库（如Vue、Vue Router等）拆分出来，这些库相对稳定，浏览器可以缓存，再次访问时无需重复下载，从而提高页面加载速度。

2. 压缩代码 - 策略：使用terser-webpack-plugin进行代码压缩。在Webpack配置中optimization.minimizer数组中添加该插件。例如：

const TerserPlugin = require('terser-webpack-plugin');
module.exports = {
    optimization: {
        minimizer: [
            new TerserPlugin()
        ]
    }
}

- **原理**：该插件会去除代码中的冗余字符（如空格、注释等），并对代码进行优化（如缩短变量名等），从而减小代码体积。这样在网络传输过程中，数据量减少，加快了下载速度，提升用户体验。

3. 图片处理 - 策略：使用image - webpack - loader。在Webpack的module.rules中配置。例如：

module.exports = {
    module: {
        rules: [
            {
                test: /\.(png|jpg|gif)$/,
                use: [
                    {
                        loader: 'file-loader',
                        options: {
                            name: 'images/[name].[ext]'
                        }
                    },
                    {
                        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
                            }
                        }
                    }
                ]
            }
        ]
    }
}

- **原理**：此loader会对图片进行压缩，通过调整图片的质量、分辨率等参数，在保证图片基本视觉效果的前提下减小图片文件大小。这样可以减少图片在网络传输中的数据量，加快页面加载速度，尤其是在移动设备等网络条件较差的环境下，效果更为显著。

4. 开启Tree - shaking - 策略：在Webpack配置中设置mode为'production'，Webpack默认会开启Tree - shaking。也可以通过optimization.minimize设置为true来进一步确保开启。 - 原理：Tree - shaking是一种只打包项目中实际用到的代码的技术。它基于ES6模块的静态结构分析（即import和export语句），在打包过程中去除未被引用的代码（dead code）。例如，在一个大型的JavaScript库中，可能只使用了其中几个函数，Tree - shaking会自动剔除没有用到的函数和相关代码，从而减小打包后的文件体积，提升加载性能。 5. 提取CSS - 策略：使用mini - css - extract - plugin插件将CSS从JavaScript中提取出来，成为单独的文件。在Webpack配置中：

const MiniCssExtractPlugin = require('mini - css - extract - plugin');
module.exports = {
    module: {
        rules: [
            {
                test: /\.css$/,
                use: [MiniCssExtractPlugin.loader, 'css - loader']
            }
        ]
    },
    plugins: [
        new MiniCssExtractPlugin()
    ]
}

- **原理**：如果CSS在JavaScript中，浏览器需要先下载并解析JavaScript才能渲染样式，这会导致页面渲染延迟。将CSS提取出来后，浏览器可以并行下载CSS和JavaScript文件，并且在下载完成后尽快渲染页面样式，提升用户看到页面的速度，改善用户体验。

星途面试题库

面试题：Vue项目中如何利用Webpack配置优化用户体验

知识考点

面试题答案