面试题：Vue CLI搭建项目时，如何优化webpack配置以提高项目性能

优化webpack配置理解

代码分割：
- 目的：将代码拆分成较小的块，避免初始加载时加载过多不必要的代码，提高首屏加载速度。例如，将第三方库（如Vue、axios等）和业务代码分开，使得浏览器可以并行加载不同的代码块，减少加载时间。
- 方法：
  - 动态导入：在ES6模块中，使用import()语法实现动态导入，webpack会自动将这些模块分割成单独的文件。例如，在Vue组件中，如果有一些组件在特定条件下才需要加载，可以使用动态导入：

// 异步导入组件
const MyComponent = () => import('./MyComponent.vue');

 - **splitChunks插件**：webpack的`splitChunks`插件可以对公共代码进行提取和分割。例如，将所有的第三方依赖提取到一个单独的文件中，配置如下：

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

压缩：
- 目的：减少代码体积，加快网络传输速度。通过移除无用代码、缩短变量名等方式来压缩代码。
- 方法：
  - TerserPlugin：webpack默认使用TerserPlugin进行代码压缩。在Vue CLI项目中，TerserPlugin已经默认配置好。如果需要自定义配置，可以在vue.config.js中进行配置，例如：

module.exports = {
  chainWebpack: config => {
    config.optimization.minimizer('terser').tap(args => {
      args[0].terserOptions.compress.drop_console = true; // 移除console.log
      return args;
    });
  }
};

图片优化：
- 目的：降低图片文件大小，加快图片加载速度，同时保证图片质量满足视觉需求。
- 方法：
  - 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();
  }
};

在Vue CLI项目中实现优化

代码分割：
- 动态导入：直接在Vue组件中使用ES6的import()语法实现异步组件加载，无需额外配置。例如上述MyComponent的动态导入。
- splitChunks：在vue.config.js中使用chainWebpack来修改webpack的optimization.splitChunks配置，如：

module.exports = {
  chainWebpack: config => {
    config.optimization.splitChunks({
      chunks: 'all',
      cacheGroups: {
        vendor: {
          test: /[\\/]node_modules[\\/]/,
          name:'vendors',
          chunks: 'all'
        }
      }
    });
  }
};

压缩：
- TerserPlugin：在vue.config.js中使用chainWebpack来修改TerserPlugin的配置。例如移除console.log：

module.exports = {
  chainWebpack: config => {
    config.optimization.minimizer('terser').tap(args => {
      args[0].terserOptions.compress.drop_console = true;
      return args;
    });
  }
};

图片优化：
- image-webpack-loader：先安装image-webpack-loader，然后在vue.config.js中使用chainWebpack配置image-webpack-loader对图片进行优化，如上述配置示例。

星途面试题库

面试题：Vue CLI搭建项目时，如何优化webpack配置以提高项目性能

知识考点

面试题答案

优化webpack配置理解

在Vue CLI项目中实现优化