按需加载,又称延迟加载或者懒加载,只有在使用到的时候才会加载进来
import引入的模块,会在加载index.js文件的时候,去加载所有的模块
Vue中提供import的加载方式
import Vue from ‘vue’
import Router from ‘vue-router’
import ‘@/components/Base’ import ‘@/components/Bg’
使用这种加载方式,会在组件初始化的时候全部加载进来,如果文件过大,会导致页面加载缓慢,体验性变差。
具体使用方法:
1. resolve => require([URL], resolve) //支持性好
2. () => system.import(URL) //webpack2官网上已经声明将逐渐废除,不推荐使用
3. () => import(URL) //配合babel的syntax-dynamic-import插件使用。
路由的懒加载
export default new Router({
routes:[
{
path: '/index',component: resolve => require(['/index/index.vue'], resolve),
},
]
})
组件的懒加载
components: {
historyTab: resolve => {require(['component/Test.vue'],resolve)
},
},