在Laravel Mix裏使用動態引入來實現Code Splitting效果

想要更好的閱讀體驗，請直接移步個人我的網站： www.pilishen.com/posts/using…

從Laravel Mix (4.0.16)起，開始默認支持動態引入了（dynamic imports）。動態引入是一種資源文件分割（code-splitting）技術，可讓咱們將js組件、第三方庫及其餘模塊分割到單獨的文件裏。好比一個項目裏，你用到了好些個js組件，有不少的vuejs或react組件，那麼你最終打包的app.js或bundle.js文件就會很大，超過1M+是常有的事兒。這個時候，勢必就會下降你的網站加載速度，尤爲當用戶處於一個慢的鏈接條件下時。

資源文件分割（code-splitting），能夠將本來一個大文件，切分紅不少小的文件，這樣每一個就可能只有幾十幾百K，而不是多少M了，這樣就能極大改善加載速度。因爲都切分開了，你就能夠一開始只加載最想要的那塊js文件，只加載頁面上用到的，那些暫時用不到的，或者在其餘頁面纔用到的，能夠在背後自動去下載，就不影響一開始的頁面渲染時間了。

配置動態引入

{id="Configuring"}

首先你得升級Laravel Mix到4.0.16以上的版本，才能使用動態引入。

經過.babelrc文件來配置

而後呢，在你的項目根目錄建立一個.babelrc文件，固然若是你已經有這個文件了，就在之前基礎上更改便可。在這個文件裏，將@babel/plugin-syntax-dynamic-import加到「plugins」這個array裏面，這樣呢就會啓用laravel mix裏已經帶的自動引入插件。

{
  "plugins": [
    "@babel/plugin-syntax-dynamic-import"
  ]
}
複製代碼

經過webpack.mix.js文件來配置

固然了，若是你不想建立上面的.babelrc文件，你對babel及其配置並不熟悉，你也能夠在mix配置文件，也即webpack.mix.js裏作配置，能夠加上下面的代碼：

mix.babelConfig({
  plugins: ['@babel/plugin-syntax-dynamic-import'],
});
複製代碼

這樣你就不用建立或更改.babelrc文件了

實際使用動態引入

{id="Using"}

原來咱們引入一個js組件，常常是這樣的：

// 標準的，或靜態的引入
import Component from './components/ExampleComponent.vue';
複製代碼

如今，若是咱們想着動態地引入一個組件，也即只有當這個組件在頁面用到的時候，纔去引入和加載，那麼能夠這樣來寫：

// 動態引入
const Component =
        () => import('./components/ExampleComponent.vue');
複製代碼

默認的，Webpack會將這些動態引入的組件切塊，切成單獨的文件，以0.js, 1.js這樣的形式來命名。

Laravel Mix的在命名上，可使用每一個切塊的名字，跟上這塊內容的hash值，而後跟上.js擴展。若是你想着具體設定每一個分塊文件的名字，那麼在動態引入的時候，能夠在組件路徑前面，加上下面這樣的一段註釋

const Component =
        () => import(/* webpackChunkName: "dynamically-imported-component" */ './components/ExampleComponent.vue');
複製代碼

能夠看到這裏，在vue組件具體路徑前面，有一段/* webpackChunkName: "dynamically-imported-component" */的註釋，這就告訴webpack，我想要這塊文件用這麼個名字。那麼這樣，最終產生的文件名就是dynamically-imported-component.[hash].js

在Vue-Router裏使用動態引入

{id="router"}

若是你項目裏用到了Vue-Router，那麼也就能夠用動態引入，來將每一個頁面切分紅單獨的文件，能夠像下面這樣作：

const routes = [
  {
    name: 'dashboard',
    path: '/dashboard',
    component:
      () => import(/* webpackChunkName: "dashboard" */ './pages/Dashboard.vue'),
  },
];
複製代碼

高級用法：腳本預加載

{id="prefetching"}

這樣已經可以提高你很多頁面的加載速度了，可是咱們還不知足。如今假設有兩個頁面，分別是A頁面和B頁面，A頁面是一個很輕量的、沒啥組件的頁面，而B頁面假設用到了咱們分離出來的一個my-component.js。

那麼這個時候，若是一個用戶訪問了頁面A，而後他又點擊了頁面B，這個時候他就得等待my-component.js這個文件去下載和處理——也即咱們加速了頁面A的加載，可是卻下降了B頁面的時間。由於以前不分離js文件的時候，當訪問了A時，app.js文件就已經徹底下載了，再訪問B頁面時就不須要請求了，就通常從瀏覽器緩存直接加載了。

若是怎麼樣，咱們能讓瀏覽器更智能一些就行了，好比說訪問了A頁面，咱們就能預計他會訪問B頁面，這時瀏覽器能夠在加載完A頁面的腳本和資源之後，在合適的時候後臺本身預先抓取B頁面要用到的腳本，這樣當訪問B頁面時，相關文件已經準備好了。

固然了，這確定不僅是個想法了，其實如今的瀏覽器都已經支持這樣的作法了，使用傳統的<link>標籤，咱們其實就能夠聲明對某個文件的預加載，至關於在瀏覽器空閒的時候去背後獲取。

<link
    rel="prefetch"
    href="/js/my-component.js"
    as="script"
>
複製代碼

這樣了之後，當訪問了A頁面，速度依然很快，當腳本都加載完了，瀏覽器就自動去獲取my-component.js文件了，當咱們再訪問到B頁面時，也就不須要臨時再加載什麼文件了，已經都提早獲取並放到緩存裏了。

結論

{id="concolusion"}

這麼好的一項功能，趕忙升級一下Mix，而後用到你的項目裏吧，相信能提高很多你的網站加載速度。

本文是咱們系列課程《Laravel&Vue深度整合實戰第二版》的擴展文章，還記得課程裏咱們用到了Element-Ui，也即餓了麼開發的vue ui組件，期間咱們只是用了Element-Ui的幾個模塊，就致使咱們的app.js文件瞬間膨脹到1M以上，在實際中，若是你嚴重依賴不少UI組件，那麼你的打包文件好幾M也都是很正常的。原來呢，咱們得自行在webpack裏進行各類設置，要麼只是輸出咱們實際用到的UI模塊，要麼就自行實現今天說的文件分割效果，這對不怎麼熟悉webpack的同窗來講，挺恐怖的。那麼如今，Mix默認簡單地支持了資源文件分割效果，就大大解決了咱們這方面的顧慮，讓你在不少頁面的效果體驗上就能夠更大膽、更有空間地作些事情了。

末了，歡迎到個人站點https://www.pilishen.com/來作客哦，也歡迎加入咱們的公開羣【公開課@pilishen.com】：109256050，等你哦~