跳到主要内容

按需加载

2023年12月24日
柏拉文
越努力，越幸运

一、认识​

当打包构建应用时，JavaScript 包会变得非常大，影响页面加载。如果我们能把不同路由对应的组件或者每个页面使用的组件分割成不同的代码块，然后当路由被访问的时候或者页面使用组件的时候才加载对应组件，这样就会更加高效。

Vite 也会将动态引入的组件单独打包成一个 chunk。

二、路由按需加载​

2.1 Vue​

router配置

{
    path: '/xxx',
    name: 'xxx',
    component: () => import('xxx'),
},

有时候我们想把某个路由下的所有组件都打包在同个异步块 (chunk) 中, 我们需要在 vite.config 中添加一下配置:

// vite.config.js
export default defineConfig({
  build: {
    rollupOptions: {
      // https://rollupjs.org/guide/en/#outputmanualchunks
      output: {
        manualChunks: {
          'group-user': [
            './src/UserDetails',
            './src/UserDashboard',
            './src/UserProfileEdit',
          ],
        },
      },
    },
  },
})