面试题：Vue CLI在实际项目构建优化场景中的应用

Question

在一个使用Vue CLI搭建的中大型项目中，为了提升页面加载速度，你会如何利用Vue CLI的相关配置进行构建优化？请列举至少两种具体的优化方式及其原理。

Answer 1

1. 代码分割（Code Splitting）

• 优化方式：使用splitChunks进行代码分割。在vue.config.js中配置：

module.exports = {
  chainWebpack: config => {
    config.optimization.splitChunks({
      chunks: 'all'
    });
  }
};

• 原理：将代码按照路由、模块等规则分割成多个较小的文件。这样在页面加载时，只需要加载当前页面所需要的代码，而不是整个应用的代码，从而减少初始加载的文件体积，加快页面加载速度。例如，不同路由对应的组件代码可以被分割成单独的文件，只有当用户访问到相应路由时才加载对应的代码。

2. 开启生产环境的压缩（Compression）

• 优化方式：在vue.config.js中配置开启gzip压缩：

const CompressionPlugin = require('compression-webpack-plugin');
module.exports = {
  configureWebpack: config => {
    if (process.env.NODE_ENV === 'production') {
      return {
        plugins: [
          new CompressionPlugin({
            test: /\.js$|\.html$|\.css$/,
            threshold: 10240
          })
        ]
      };
    }
  }
};

• 原理：在构建过程中，对输出的文件进行gzip压缩。当浏览器请求这些文件时，服务器将压缩后的文件发送给浏览器，浏览器再进行解压。由于压缩后的文件体积大幅减小，传输的数据量减少，从而加快了文件的传输速度，提升页面加载速度。例如，一个原本100KB的文件经过gzip压缩后可能只有30KB左右。

3. 优化图片加载

• 优化方式：使用image-webpack-loader对图片进行压缩。首先安装image-webpack-loader，然后在vue.config.js中配置：

module.exports = {
  chainWebpack: config => {
    config.module
     .rule('images')
     .use('image-webpack-loader')
     .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
        }
      })
     .end();
  }
};

• 原理：在构建过程中，image-webpack-loader会对项目中的图片进行压缩处理。通过降低图片的质量、转换图片格式（如转换为WebP格式，WebP格式通常比JPEG和PNG有更好的压缩比）等方式，减小图片文件的体积。这样在页面加载时，图片的下载速度更快，进而提升页面整体的加载速度。