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

展开阅读全文

没有更多推荐了,返回首页