Vue应用的打包大小优化：组件级代码分割（Code Splitting）的策略与配置

Vue 应用打包大小优化：组件级代码分割 (Code Splitting) 的策略与配置

大家好，今天我们来深入探讨 Vue 应用打包大小优化的一个关键策略：组件级代码分割 (Code Splitting)。打包体积过大是前端应用性能的一大瓶颈，它会直接影响首屏加载速度，进而影响用户体验。代码分割允许我们将应用的代码拆分成多个较小的 chunk，用户在访问不同路由或功能时按需加载这些 chunk，从而显著减少初始加载体积，提高应用性能。

为什么需要代码分割？

在没有代码分割的情况下，Vue 应用会将所有组件、依赖项、样式等打包成一个或少数几个大的 JavaScript 文件。当用户访问应用时，浏览器需要下载并解析这些大文件，这会消耗大量时间和带宽。特别是对于大型应用，初始加载时间会非常长，导致用户体验不佳。

代码分割通过将应用拆分成更小的 chunk，实现了按需加载。这意味着用户只需要下载当前路由或功能所需的代码，而无需下载整个应用的代码。这可以显著减少初始加载时间，提高应用性能。

代码分割的类型

代码分割主要有两种类型：

• 基于路由的代码分割: 将应用按照路由进行分割，每个路由对应一个或多个 chunk。当用户访问某个路由时，才加载该路由对应的 chunk。
• 基于组件的代码分割: 将应用按照组件进行分割，每个组件对应一个或多个 chunk。当组件被渲染时，才加载该组件对应的 chunk。

这两种方式可以单独使用，也可以结合使用。在实际项目中，通常会结合使用这两种方式，以达到最佳的优化效果。

实现组件级代码分割的策略

组件级代码分割的核心在于使用 import() 函数进行动态导入。import() 函数返回一个 Promise，当模块加载完成时，Promise 会 resolve 为该模块的导出对象。

1. 异步组件 (Async Components)

Vue 提供了异步组件的机制，可以方便地实现组件级的代码分割。异步组件允许我们在需要渲染组件时才加载该组件的代码。

// 定义一个异步组件
const AsyncComponent = () => ({
  // 需要加载的组件应该是一个 Promise
  component: import('./components/MyComponent.vue'),
  // 加载中显示的组件
  loading: LoadingComponent,
  // 出错时显示的组件
  error: ErrorComponent,
  // 延迟显示加载组件的时间。默认值是 200ms。
  delay: 200,
  // 如果提供了超时时间且组件加载仍然超时，
  // 则使用 error 组件。默认值是：`Infinity`。
  timeout: 3000
});

// 使用异步组件
export default {
  components: {
    AsyncComponent
  },
  template: `
    <div>
      <AsyncComponent />
    </div>
  `
};

在这个例子中，MyComponent.vue 组件的代码只有在 AsyncComponent 被渲染时才会被加载。LoadingComponent 和 ErrorComponent 分别用于在加载中和加载失败时显示不同的内容，提升用户体验。delay 和 timeout 允许你自定义加载过程中的行为。

2. 结合 v-if 使用 import()

另一种常用的方式是在 v-if 指令中使用 import() 函数。这种方式允许我们根据条件动态加载组件。

<template>
  <div>
    <button @click="showComponent = true">Show Component</button>
    <component v-if="showComponent" :is="dynamicComponent" />
  </div>
</template>

<script>
import { defineAsyncComponent } from 'vue';

export default {
  data() {
    return {
      showComponent: false,
      dynamicComponent: null
    };
  },
  watch: {
    showComponent(newValue) {
      if (newValue) {
        this.dynamicComponent = defineAsyncComponent(() => import('./components/AnotherComponent.vue'));
      } else {
        this.dynamicComponent = null;
      }
    }
  }
};
</script>

在这个例子中，AnotherComponent.vue 组件的代码只有在 showComponent 为 true 时才会被加载。defineAsyncComponent 用于创建异步组件，确保 Vue 能够正确处理动态导入的组件。

3. 在路由中使用异步组件

Vue Router 支持直接使用异步组件作为路由组件，这可以方便地实现基于路由的代码分割。

import { createRouter, createWebHistory } from 'vue-router';

const routes = [
  {
    path: '/home',
    component: () => import('./components/Home.vue')
  },
  {
    path: '/about',
    component: () => import('./components/About.vue')
  }
];

const router = createRouter({
  history: createWebHistory(),
  routes
});

export default router;

在这个例子中，Home.vue 和 About.vue 组件的代码只有在访问 /home 和 /about 路由时才会被加载。

Webpack 的配置

Webpack 是 Vue 应用常用的打包工具。要实现代码分割，我们需要配置 Webpack 的 splitChunks 插件。

// webpack.config.js
module.exports = {
  // ... 其他配置
  optimization: {
    splitChunks: {
      chunks: 'all', // 默认值是 async，这里设置为 all 以分割所有类型的 chunk
      cacheGroups: {
        vendors: {
          test: /[\/]node_modules[\/]/, // 匹配 node_modules 中的模块
          priority: -10, // 优先级，数值越大优先级越高
          name: 'vendors', // chunk 的名称
        },
        common: {
          minChunks: 2, // 最小引用次数，只有被引用两次及以上的模块才会被分割
          priority: -20, // 优先级
          reuseExistingChunk: true, // 如果该模块已经被分割过，则复用已有的 chunk
        },
      },
    },
  },
};

这个配置会将 node_modules 中的模块打包成一个名为 vendors 的 chunk，将至少被引用两次的模块打包成一个名为 common 的 chunk。chunks: 'all' 确保了同步和异步模块都会被分割。

splitChunks 的详细配置项:

配置项	类型	描述
chunks	string	指定要分割的 chunk 类型。可选值：'async' (默认值，只分割异步 chunk), 'initial' (只分割初始 chunk), 'all' (分割所有 chunk)。
minSize	number	chunk 的最小大小，单位是字节。只有大于该大小的 chunk 才会被分割。
maxSize	number	chunk 的最大大小，单位是字节。如果 chunk 大于该大小，则会被进一步分割。
minChunks	number	模块的最小引用次数。只有被引用至少该次数的模块才会被分割。
maxAsyncRequests	number	异步 chunk 的最大并发请求数。
maxInitialRequests	number	初始 chunk 的最大并发请求数。
automaticNameDelimiter	string	用于生成 chunk 名称的分隔符。默认值是 ~。
name	string or function	chunk 的名称。可以是字符串或函数。如果使用函数，则该函数应该返回 chunk 的名称。
cacheGroups	object	缓存组。允许我们对不同的模块进行不同的分割策略。

cacheGroups 的配置项:

配置项	类型	描述
test	RegExp or function
priority	number	缓存组的优先级。数值越大优先级越高。

更多IT精英技术系列讲座，到智猿学院