vue-router 路由的懶加載原理及方式

當打包建構應用時，JavaScript 包會變得非常大，影響頁面加載。如果我們能把不同路由對應的元件分割成不同的代碼塊，然後當路由被通路的時候才加載對應元件，這樣就更加高效了。

結合 Vue 的異步元件和 Webpack 的代碼分割功能，輕松實作路由元件的懶加載。

webpack打包會将所有資源檔案合并壓縮成一個檔案，導緻最終的檔案非常大，甚至超過幾M，以緻頁面首次加載會比較慢，如下圖：

其中紅色标出的是在浏覽器中加載的js檔案，gzip壓縮前已經達到500多KB了。

再看看路由按需加載後：

檔案被拆成一個個小的檔案，即webpack的檔案分割。這裡是以頁面為機關進行切割。具體實作如下：

通常情況下，我們引入vue檔案的方式是

import RankList from ‘@/components/RankList’

然後在router裡面配置

{
      path: '/rank-list',
      name: 'RankList',
      meta: {
        title: '排行榜'
      },
      component: RankList
}
           

按需加載隻需要修改vue檔案的引入方式：

{
    path: "/about",
    name: "About",
    // route level code-splitting
    // this generates a separate chunk (about.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: () =>
      import(/* webpackChunkName: "about" */ "../views/About.vue")
  },
           

是打包後檔案名稱，後面是檔案路徑。

‘@/components/RankList’ 是檔案路徑。

// 路由懶加載寫法
const Home = () => import ("../views/Home.vue");
const My = () => import ("../views/My.vue");
const HomeNews = () => import ("../components/HomeNews.vue");
const HomeMsg = () => import ("../components/HomeMsg.vue");
           

參考：https://www.cnblogs.com/hutuzhu/p/10407258.html

https://www.cnblogs.com/mica/p/10700397.html