面试题：Webpack 构建优化之 Vue 项目的 Tree - shaking 深度剖析

Tree - shaking 在 Vue 项目中的原理

静态分析 ES6 模块：Tree - shaking 基于 ES6 模块的静态结构分析。ES6 模块通过 import 和 export 语句明确指定依赖关系，Webpack 在编译过程中可以静态解析这些语句，确定模块的导入和导出。
消除未引用代码：Webpack 构建时，会遍历模块依赖图，识别出哪些模块或模块中的导出项没有被其他模块引用，将这些未引用的代码视为可以安全移除的“死代码”，从而在打包时将其排除，达到减小包体积的目的。例如在 Vue 项目中，如果一个组件定义了一些方法但从未在任何地方调用，Tree - shaking 可以将这些未使用的方法代码移除。

局限性

非 ES6 模块语法：Tree - shaking 依赖 ES6 模块静态分析，对于 CommonJS 等动态导入（如 require 语句）的模块，Webpack 无法准确判断依赖关系，难以有效进行 Tree - shaking。在 Vue 项目中，如果引入了使用 CommonJS 规范的第三方库，可能无法对该库进行 Tree - shaking 优化。
副作用代码：有些代码虽然没有被直接引用，但可能存在副作用，比如修改全局变量、执行副作用函数等。Tree - shaking 无法区分是否存在副作用，可能误删有副作用的代码，导致程序运行异常。例如在 Vue 组件中，可能存在通过 window 对象挂载全局方法的代码，Tree - shaking 可能将该代码移除，导致全局方法不可用。
动态导入：Vue 支持动态导入组件（如 import('./SomeComponent.vue')），这种动态导入在编译时无法进行静态分析，Tree - shaking 无法对动态导入的模块进行优化，这些模块会被整个打包进来，影响包体积优化效果。

通过 Webpack 配置发挥 Tree - shaking 优势

mode 设置：将 Webpack 的 mode 设置为 'production'，在生产模式下，Webpack 会启用各种优化，包括更有效的 Tree - shaking。默认开启 TerserPlugin，该插件会配合 Tree - shaking 进一步压缩代码，移除未使用的代码。

module.exports = {
  mode: 'production'
};

优化 CSS Tree - shaking：对于 Vue 项目中的 CSS，可以使用 mini - css - extract - plugin 配合 OptimizeCSSAssetsPlugin 来实现 CSS 的 Tree - shaking。mini - css - extract - plugin 将 CSS 从 JavaScript 中提取出来，OptimizeCSSAssetsPlugin 可以对提取出来的 CSS 进行优化，移除未使用的 CSS 规则。

const MiniCssExtractPlugin = require('mini - css - extract - plugin');
const OptimizeCSSAssetsPlugin = require('optimize - css - assets - plugin');

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [MiniCssExtractPlugin.loader, 'css - loader']
      }
    ]
  },
  plugins: [
    new MiniCssExtractPlugin()
  ],
  optimization: {
    minimizer: [
      new OptimizeCSSAssetsPlugin({})
    ]
  }
};

配置 externals：对于一些不会被修改且体积较大的第三方库，如 Vue 本身，可以通过 externals 配置，在打包时不将其打入 bundle 中，而是通过 CDN 引入。这样可以减小打包体积，同时也能避免重复打包这些库。

module.exports = {
  externals: {
    'vue': 'Vue'
  }
};

代码编写规范发挥 Tree - shaking 优势及处理副作用

使用 ES6 模块规范：确保项目中尽量使用 ES6 模块语法进行代码编写，避免使用 CommonJS 等不利于 Tree - shaking 的模块规范。在导入组件或模块时，使用 import 语句明确指定依赖。

// 推荐
import { someFunction } from './utils.js';

// 避免
const someFunction = require('./utils.js').someFunction;

拆分模块：将大模块拆分成小的、功能单一的模块，每个模块只导出必要的内容。这样 Tree - shaking 可以更精准地移除未使用的代码。例如，将一个包含多个功能的 Vue 组件拆分成多个功能组件，每个组件只导出自身相关的逻辑。
处理副作用：
- 显式标记副作用：对于存在副作用的代码，可以通过在 package.json 中设置 "sideEffects": false 来告诉 Webpack 项目中没有副作用代码，这样 Webpack 可以更激进地进行 Tree - shaking。如果部分文件有副作用，可以将这些文件路径添加到 "sideEffects" 数组中，如 "sideEffects": ["*.css", "./src/sideEffectFile.js"]。
- 避免全局副作用：尽量减少在全局作用域下产生副作用的代码，将副作用限制在局部模块内。如果需要全局变量，可以通过 Vue 的 provide/inject 机制或 Vuex 等状态管理工具来实现，避免直接修改全局变量导致 Tree - shaking 误删代码。

星途面试题库

面试题：Webpack 构建优化之 Vue 项目的 Tree - shaking 深度剖析

知识考点

面试题答案

Tree - shaking 在 Vue 项目中的原理

局限性

通过 Webpack 配置发挥 Tree - shaking 优势

代码编写规范发挥 Tree - shaking 优势及处理副作用