前端優化（二）：使用路由懶加載

二、開啟路由懶加載

上一章内容： 前端優化（一）：開啟nginx gzip壓縮

本文繼上一章，接着前一章，繼續講解如何做前端優化，以vue項目為例。

路由懶加載依賴于webpack的分片，預設情況下，一個項目被webpack打包成一個 index.html, app.js, chunk-vendors.js, app.css，chunk-vendors.css和若幹圖檔。

單頁應用下，隻有一個index.html。如果要做多頁，可進行配置。

app.js對應為項目本身的js，chunk-vendors.js為引入的第三方js。css同理。

這一章我們的主要目的是使用路由懶加載，根據路由切割js和css檔案，按需加載，以免檔案過大，影響網頁加載速度。

我們隻需在路由配置的路由數組中，修改元件導入方式即可。

修改前：

routes: [
    {
      path: "/",
      name: "home",
      component: Home
    },
    {
      path: "/about",
      name: "about",
      component: About
    }
  ]
           

修改後：

routes: [
    {
      path: "/",
      name: "home",
      component: Home
    },
    {
      path: "/about",
      name: "about",
      component: () => import(/* webpackChunkName: "about" */ "./views/About.vue")
    }
  ]
           

其中 webpackChunkName 為webpack打包出來的檔案名。

如圖：

通過上圖我們可以看到，about 元件已經被抽離出單獨的檔案，這個檔案會在路由加載到about頁面時加載。