vue异步组件技术 ==== 异步加载 vue-router配置路由 , 使用vue的异步组件技术 , 可以实现按需加载 但是,这种情况下一个组件生成一个js文件
import Vue from 'vue' import VueRouter from 'vue-router' // "@"相当于".." import Detail from '../pages/goodsDetail' import Msg from '../components/message.vue' // 使用路由 Vue.use(VueRouter) export default new VueRouter({ mode: 'history', routes: [ { // 进行路由配置,规定'/'引入到home组件 path: '/', component: resolve => require(['../pages/home.vue'], resolve), meta: { title: 'home' } }, { path: '/msg', component: Msg }, { path: '/detail', component: Detail, children: [ { path: 'msg', component: Msg } ] } ] }) component: resolve => require(['../pages/home.vue'], resolve)如果用import引入的话,当项目打包时路由里的所有component都会打包在一个js中,造成进入首页时,需要加载的内容过多,时间相对比较长
当你用require这种方式引入的时候,会将你的component分别打包成不同的js,加载的时候也是按需加载,只用访问这个路由网址时才会加载这个js
打包的时候看看目录结构就明白