在 使用 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/