>[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)