Vue 项目中动态导入组件为啥没生效？

佳沫 Dev 提问于 2026-03-03 07:15:20 阅读 61

优化

我用 Vue 3 做了个后台系统，想对路由组件做 code splitting，但打包后发现所有组件还是被打进一个 chunk 里了，根本没拆分。是不是写法有问题？

我试过用 () => import('./views/Dashboard.vue') 这种写法，也确认 webpack 配置没关掉 splitChunks，但就是不生效。

<script setup>
const routes = [
  {
    path: '/dashboard',
    component: () => import('./views/Dashboard.vue')
  },
  {
    path: '/user',
    component: () => import('./views/User.vue')
  }
]
</script>

打包优化

我来解答赞 17 收藏

反馈

1 条解答

南宫云超 Lv1

语法没问题，大概率是 webpack 的 splitChunks 策略觉得文件太小或者符合某些规则自动给合并了。试试在 import 语句里加个魔法注释，显式指定 chunk 名称，强制拆分。

const routes = [

  {

    path: '/dashboard',

    component: () => import(/* webpackChunkName: "dashboard" */ './views/Dashboard.vue')

  },

  {

    path: '/user',

    component: () => import(/* webpackChunkName: "user" */ './views/User.vue')

  }

]

2026-03-04 18:00