博客站

代码分割（Code Splitting）是一种优化技术，通过将代码拆分成多个小块，按需加载，从而减少初始加载时间，提升应用性能。Vite 默认支持自动代码分割，同时也可以通过配置手动进行代码分割。以下是实现代码分割的几种方法：

1. 自动代码分割

• Vite 默认支持：Vite 默认会根据动态导入（Dynamic Import）自动进行代码分割。
• 示例：

  // src/main.js
  import('./moduleA.js').then((moduleA) => {
    moduleA.default();
  });
  
  import('./moduleB.js').then((moduleB) => {
    moduleB.default();
  });
  

• 构建结果：Vite 会将 moduleA.js 和 moduleB.js 分别打包成独立的文件，按需加载。

2. 手动代码分割

• 通过 rollupOptions 配置：可以在 vite.config.js 中通过 rollupOptions 配置手动代码分割。
• 示例：

  export default defineConfig({
    build: {
      rollupOptions: {
        output: {
          manualChunks: {
            vendor: ['lodash', 'axios'], // 将 lodash 和 axios 打包到一个单独的 chunk 中
            utils: ['src/utils.js'], // 将 utils.js 打包到一个单独的 chunk 中
          },
        },
      },
    },
  });
  

3. 动态导入（Dynamic Import）

• 使用动态导入语法：通过动态导入语法实现按需加载。
• 示例：

  // src/main.js
  const loadModuleA = async () => {
    const moduleA = await import('./moduleA.js');
    moduleA.default();
  };
  
  const loadModuleB = async () => {
    const moduleB = await import('./moduleB.js');
    moduleB.default();
  };
  
  document.getElementById('loadA').addEventListener('click', loadModuleA);
  document.getElementById('loadB').addEventListener('click', loadModuleB);
  

• 构建结果：Vite 会将 moduleA.js 和 moduleB.js 分别打包成独立的文件，点击按钮时按需加载。

4. 使用 import() 语法

• 结合路由实现按需加载：在单页应用（SPA）中，结合路由实现按需加载。
• 示例：

  // src/router.js
  const routes = [
    {
      path: '/',
      component: () => import('./views/Home.vue'),
    },
    {
      path: '/about',
      component: () => import('./views/About.vue'),
    },
  ];
  
  const router = createRouter({
    history: createWebHistory(),
    routes,
  });
  
  export default router;
  

• 构建结果：Vite 会将 Home.vue 和 About.vue 分别打包成独立的文件，访问对应路由时按需加载。

5. 使用 vite-plugin-pages 插件

• 自动生成路由并实现代码分割：vite-plugin-pages 插件可以自动生成路由并实现代码分割。
• 安装：

  npm install vite-plugin-pages --save-dev
  

• 配置：

  import { defineConfig } from 'vite';
  import vue from '@vitejs/plugin-vue';
  import Pages from 'vite-plugin-pages';
  
  export default defineConfig({
    plugins: [
      vue(),
      Pages({
        dirs: 'src/pages', // 指定页面目录
      }),
    ],
  });
  

• 构建结果：Vite 会自动将 src/pages 目录下的页面组件打包成独立的文件，访问对应路由时按需加载。

示例：完整的代码分割配置

以下是一个完整的 vite.config.js 文件示例，包含自动和手动代码分割配置：

import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';

export default defineConfig({
  plugins: [vue()],
  build: {
    rollupOptions: {
      output: {
        manualChunks: {
          vendor: ['lodash', 'axios'], // 将 lodash 和 axios 打包到一个单独的 chunk 中
          utils: ['src/utils.js'], // 将 utils.js 打包到一个单独的 chunk 中
        },
      },
    },
  },
});

总结

通过自动代码分割、手动代码分割、动态导入、结合路由实现按需加载以及使用 vite-plugin-pages 插件等方法，可以实现代码分割，从而减少初始加载时间，提升应用性能。合理配置这些选项，可以显著优化应用的加载速度和运行效率。