Vue组件分割 动态加载组件

vue开发的项目 组件太多，打包的一个app.js文件太大，网页加载太慢怎么办？

将组件分模块打包，按需加载。

vue官网有异步加载组件，我在laravel里面试了下，没成功，可能是laravel的webpack配置问题。

laravel的webpack配置太长不看。

（可以的话laravel+vue的项目，可以考虑不用laravel自带的vue配置，自己重新弄个vue的前端项目，自己写webpack配置，这样自由灵活度高，还能学webpack）

回到主题，laravel自带的vue项目可以使用babel的 syntax-dynamic-import 插件。使用步骤：

1、安装

npm install --save-dev babel-plugin-syntax-dynamic-import

2、在项目根目录加一个".babelrc"文件（laravel的前端项目根目录在：resouces/assets/js）

里面的内容是：

{

"plugins": ["syntax-dynamic-import"]

}

3、异步加载组件

Vue.component('componentName', ()=>import('./component/example.vue') )

当然，大部分项目都不会这么写组件，都有路由，路由中就要这么写

    {

path:"/home",

component: ()=>import('./components/home'),

},

这样就大功告成了，就不会只打包成一个app.js

而是会有几个路由就打包成几个js+app.js，这样进不同的模块，就会按需加载不同的js

只是分割的js被放到了public文件夹，而不是public/js，不知道这要怎么配置，有知道的希望可以告诉我

总结一下就是：

1、 npm install 那个插件
2、 js根目录加个插件配置文件
3、 修改路由里面 component写法

之后再npm run dev的时候，插件会自动根据你路由分别打包，而不是只有一个app.js

( app.js依旧有，php页面不用变，依旧只引用这个app.js就够了，webpack会帮你解决按需加载的问题 )

翻译，原文地址：

https://www.bdtunnel.com/2017/12/how-to-load-component-when-needed-with.html