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

環境

使用 webpack 非 Vite

發現問題

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

動態引入

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

解法

Vue2解法

配置

可以選擇設定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會去解決按需要才載入問題

Vue3 and inertia解法

動態引入`Page vue`

修改app.js

import { createApp, h } from 'vue';
import { createInertiaApp } from '@inertiajs/inertia-vue3';

const app = createInertiaApp({
    title: (title) => `${title} - ${appName}`,
    // 原先寫法
    // resolve: (name) => require(`./Pages/${name}.vue`),
    // 更改後
    resolve: (name) => import(/* webpackChunkName: "[request]" */`./Pages/${name}.vue`),
    setup({ el, app, props, plugin }) {
        return createApp({ render: () => h(app, props) })
            .use(plugin)
            .mixin({ methods: { route } })
            .mount(el);
    },
});