毛哥資訊日誌

在 使用 Laravel 建構大型 Web 應用時，往往會在 app.js 一次載入全部的 Components，造成瀏覽器的負擔，這時候就需要動態載入 Components 的時候了。

1. 安裝 npm babel-plugin-syntax-dynamic-import 套件

npm i babel-plugin-syntax-dynamic-import

2. 在 webpack.mix.js 加入下面的 code (如果你的 laravel-mix 版本低於 2.0，請改用 .babelrc 設定你的 plugins)

mix.babelConfig({
    plugins: ['syntax-dynamic-import']
});

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

3. 在 resources/js/app.js 下修改 Components 載入方式

Vue.component('foo-component', require('./components/FooComponent.vue'));

修改成

Vue.component('foo-component', () => import('./components/FooComponent.vue'));

到這邊已經設定完成，可以執行 npm run dev 查看 console 輸出是不是多了些檔案

透過瀏覽器的 開發者工具 -> 網路 查看是否已成功動態載入

打完收工！

參考

https://vuejs.org/v2/guide/components-dynamic-async.html#Async-Components
https://vuejscaff.com/articles/56/load-components-on-demand-when-using-vuejs
https://neighborhood999.github.io/2018/02/04/laravel-with-asynic-import-vue-component/