>[success] # 路由懒加载 1. 当打包构建应用时，JavaScript 包会变得非常大，影响页面加载,实际往往是好多菜单都可能不会被点击，因此这种一次性质的加载是浪费的可以将，不同路由对应的组件分割成不同的代码块，然后当路由被访问的时候才加载对应组件，好处是提高首屏的渲染效率 2. Vue Router默认就支持动态来导入组件 3. webpack从3.x开始支持对分包进行命名（chunk name），可以规定打包后文件名 ~~~ { path: '/about', component: () => import( /* webpackChunkName: "about动态打包" */ '@/view/About.vue' ), }, ~~~ * 打包后效果，将整个被标记路由单独打包，当触发时候才会请求加载  >[danger] ##### Vite 在Vite中，你可以在[`rollupOptions`](https://vitejs.dev/config/#build-rollupoptions)下定义分块： ~~~ // vite.config.js export default defineConfig({ build: { rollupOptions: { // https://rollupjs.org/guide/en/#outputmanualchunks output: { manualChunks: { 'group-user': [ './src/UserDetails', './src/UserDashboard', './src/UserProfileEdit', ], }, }, }, }) ~~~ >[info] ## 官网 [路由懒加载](https://router.vuejs.org/zh/guide/advanced/lazy-loading.html#%E4%BD%BF%E7%94%A8-webpack)