代码分割

代码分割可以把其他代码分割出来，并生成多个bundle文件。这样只需要加载当前页面所需的代码，从而提高页面加载速度。

TIP

1.默认情况下，Vite 会将所有导入的代码都打包到一个文件中，这可能会导致 bundle 的体积过大，影响页面加载速度。可以使用代码分割功能，可以将代码按需加载，从而提高性能。
2.代码分割可以通过手动指定分割规则来实现。在 vite.config.js 文件中，可以使用 manualChunks 选项来指定分割规则。例如，可以将 lodash 和 UI 库单独打包，以减少主 bundle 的体积。

配置代码分割

// vite.config.js
export default defineConfig({
  build: {
    rollupOptions: {
      output: {
        // 手动指定分割规则
        manualChunks: {
          'lodash': ['lodash'],
          'ui-library': ['element-plus', 'ant-design-vue'],
          // 将 utils 拆分为公共模块
          utils: ['src/utils/index.js'],
          // 将 node_modules 中的大依赖单独打包
          'vendor': ['vue', 'vue-router', 'pinia']
        }
      }
    }
  }
})

// vite.config.js
export default defineConfig({
  build: {
    rollupOptions: {
      output: {
        // 手动指定分割规则
        manualChunks: {
          'lodash': ['lodash'],
          'ui-library': ['element-plus', 'ant-design-vue'],
          // 将 utils 拆分为公共模块
          utils: ['src/utils/index.js'],
          // 将 node_modules 中的大依赖单独打包
          'vendor': ['vue', 'vue-router', 'pinia']
        }
      }
    }
  }
})

打包后，代码会被分割成多个 chunk，每个 chunk 都会单独打包成一个文件。

plaintext

dist/
├── assets/
│   ├── Dashboard.123abc.js    # 路由组件 chunk
│   ├── vendor.456def.js       # 第三方依赖
│   ├── element-plus.789ghi.js # UI 库单独 chunk
│   └── index.123xyz.css       # 分割后的 CSS

dist/
├── assets/
│   ├── Dashboard.123abc.js    # 路由组件 chunk
│   ├── vendor.456def.js       # 第三方依赖
│   ├── element-plus.789ghi.js # UI 库单独 chunk
│   └── index.123xyz.css       # 分割后的 CSS

代码分割 ​

配置代码分割 ​

代码分割

配置代码分割