面试题：Vue CLI 中如何优化打包后的代码体积

代码分割（Code Splitting）
- 原理：将代码按路由、组件等逻辑进行拆分，避免所有代码打包在一个文件中。例如，在Vue项目中使用动态导入（import()）来实现路由懒加载。这样在页面加载时，只有当前需要展示的部分代码会被加载，而不是一次性加载整个应用的代码。在Vue Router中配置如下：
```
const router = new VueRouter({
  routes: [
    {
      path: '/home',
      component: () => import('./views/Home.vue')
    }
  ]
})
```
- 效果：减少初始加载的代码量，加快页面的首次渲染速度，提升用户体验。
Tree - shaking
- 原理：Tree - shaking是一种通过消除未使用代码（dead code）来优化打包体积的技术。在ES6模块系统中，工具可以分析模块之间的依赖关系，检测哪些代码没有被其他模块引入使用，然后在打包过程中将这些未使用的代码排除在外。Vue CLI默认支持ES6模块，Webpack在打包时会自动进行Tree - shaking操作。例如，如果一个模块中有如下代码：
```
// utils.js
export function add(a, b) {
  return a + b;
}
export function subtract(a, b) {
  return a - b;
}
```
而在另一个模块中只引入add函数：
```
import { add } from './utils.js';
console.log(add(1, 2));
```
那么Webpack在打包时会将subtract函数的代码排除，因为它没有被使用。
- 效果：有效减少打包后的代码体积，提高应用性能。
压缩代码
- 原理：在打包过程中，使用压缩工具对代码进行压缩。例如，Webpack默认会使用TerserPlugin对JavaScript代码进行压缩，它会移除代码中的空格、注释，缩短变量名等操作，从而减小代码体积。对于CSS代码，也有相应的CSS - Mini - Extract - Plugin等工具进行压缩。以JavaScript压缩为例，TerserPlugin配置如下（在webpack.config.js中）：
```
module.exports = {
  optimization: {
    minimizer: [
      new TerserPlugin()
    ]
  }
};
```
- 效果：显著减小打包后文件的大小，加快文件在网络中的传输速度，进而提升加载性能。

星途面试题库

面试题：Vue CLI 中如何优化打包后的代码体积

知识考点

面试题答案