Laravel Vue组件分割，動態加載组件

發現問題

在laravel上開發Vue，往往都把組件註冊在app.js上，加載時會一次載入所有組件，造成client side網頁加載時間變長，影響使用者體驗

解法

動態引入

從laravel-mix(4.0.16)起，開始支援動態引入(Dynamic Import)，動態引入就是一種code splitting，可以將單一的bundle 切分成數個塊chunk，可搭配平行載入，或在有需要時才載入，又或是對一些不常變動的 chunk 個別做快取，來達到載入效能的優化。算是一種 Lazy Loading(等用到的時候再載入)的實現

配置

可以選擇設定webpack.mix.js或.babelrc檔案擇一即可

webpack.mix.js配置

在webpack.mix.js加上以下這行程式碼，laravel-mix必須是4.0.16版本以上

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

.babelrc檔案設置

根目錄新增.babelrc 檔案或是修改，將 @babel/plugin-syntax-dynamic-import 加到 「plugins」 這個array裏面，在啟用laravel-mix時就會自動引入

{ "plugins": [ "@babel/plugin-syntax-dynamic-import" ] } 

使用動態引入

原先引入Vue組件是使用static import方法引入

import ExampleComponent from "./components/ExampleComponent.vue";
Vue.component("example-component", ExampleComponent);

將其更改為Dynamic Import

寫法一

通過使用特殊註釋語法提供塊名稱來使用命名塊（需要 webpack > 2.4），加入/* webpackChunkName: "example" */，為塊命名，不然在run dev 跟 run prod檔案名稱會不相同。

const ExampleComponent = () => import(/* webpackChunkName: "example" */ "./components/ExampleComponent.vue");
Vue.component("example-component", ExampleComponent);

寫法二

Vue.component("example-component", () => import(/* webpackChunkName: "example" */ "./components/ExampleComponent.vue"));

在vue router中

const routes = [
    {
        path:"/home",
        component: ()=>import(/* webpackChunkName: "example" */ './components/ExampleComponent'),
    },
];

更改塊存放位置

可以設置webpack.mix.js更改塊(chunks)存放的位置

mix.webpackConfig({
    output:{
        chunkFilename: 'js/chunks/[name].js',
        publicPath: '/',
    }
});

編譯

npm run dev 或是 npm run watch

後記

可以看到在還未分割檔案前app.js的容量較大，分割後多了其他組件的js而app.js也縮水了

切割前:

切割後:

也只需要加載app.js，laravel-mix會去解決按需要才載入問題

本作品采用《CC 协议》，转载必须注明作者和本文链接