面试题：Vue CLI 在大规模 Vue 项目中，如何优化打包后的文件体积以提升性能？

1. 代码分割

原理：将代码按照路由、功能模块等进行拆分，使得在初始加载时，只加载必要的代码，而不是一次性加载整个项目的代码。
Vue CLI 配置方式：在 vue.config.js 文件中，通过 configureWebpack 选项配置 splitChunks。示例如下：

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

这样配置后，Webpack 会自动将所有异步 chunk（通过 import() 引入的模块）和同步 chunk 进行代码分割。chunks 设置为 'all' 表示对所有类型的 chunk 进行分割，还可以设置为 'async' 只分割异步 chunk，'initial' 只分割初始 chunk。

2. Tree - shaking

原理：Tree - shaking 是一种通过消除未使用的代码来优化打包体积的技术。它基于 ES6 模块的静态结构分析，在打包过程中，分析哪些模块的哪些导出是真正被使用的，未被使用的部分不会被打包进最终文件。
Vue CLI 配置方式：Vue CLI 默认支持 Tree - shaking。在项目中使用 ES6 模块语法（import 和 export）引入模块即可。例如，如果使用一个库，只引入需要的函数，而不是整个库。

// 错误示例，引入整个库
import _ from 'lodash';
// 正确示例，只引入需要的函数
import { debounce } from 'lodash';

只要代码遵循 ES6 模块规范，Webpack 在打包时就会自动进行 Tree - shaking，无需额外的复杂配置。

3. 图片压缩

原理：对项目中使用的图片进行压缩，减少图片文件的大小，从而降低打包体积。较小的图片在网络传输和加载时会更快。
Vue CLI 配置方式：可以使用 image - webpack - loader 插件。首先安装该插件：npm install image - webpack - loader - - save - dev。然后在 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();
  }
};

这样就会在打包过程中对图片进行压缩处理。

4. 移除未使用的 CSS

原理：项目中可能会引入一些 CSS 框架或自定义 CSS，但有些样式可能并未在实际页面中使用，移除这些未使用的 CSS 可以减小打包体积。
Vue CLI 配置方式：可以使用 purgecss - webpack - plugin 插件。先安装：npm install purgecss - webpack - plugin - - save - dev。然后在 vue.config.js 中配置：

const PurgeCSSPlugin = require('purgecss - webpack - plugin');
const glob = require('glob - all');
module.exports = {
  configureWebpack: {
    plugins: [
      new PurgeCSSPlugin({
        paths: glob.sync(`${path.join(__dirname, 'src')}/**/*`, {nodir: true}),
        safelist: function () {
          return {
            standard: ['body - dark']
          };
        }
      })
    ]
  }
};

paths 配置项指定要扫描的文件路径，safelist 可以指定一些不会被移除的 CSS 类名，避免误删有用的样式。

星途面试题库

面试题：Vue CLI 在大规模 Vue 项目中，如何优化打包后的文件体积以提升性能？

知识考点

面试题答案

1. 代码分割

2. Tree - shaking

3. 图片压缩

4. 移除未使用的 CSS