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

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 devrun 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的容量較大,分割後多了其他組件的jsapp.js也縮水了

切割前:

切割後:

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

本作品采用《CC 协议》,转载必须注明作者和本文链接
《L05 电商实战》
从零开发一个电商项目,功能包括电商后台、商品 & SKU 管理、购物车、订单管理、支付宝支付、微信支付、订单退款流程、优惠券等
《L04 微信小程序从零到发布》
从小程序个人账户申请开始,带你一步步进行开发一个微信小程序,直到提交微信控制台上线发布。
讨论数量: 0
(= ̄ω ̄=)··· 暂无内容!

讨论应以学习和精进为目的。请勿发布不友善或者负能量的内容,与人为善,比聪明更重要!