vue之router路由最优美写法,懒加载、打包代码分离。
一、基础写法,没有懒加载,打包分离代码
官方最基础的路由写法
import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
Vue.use(Router)
export default new Router({
routes: [
{
path: '/',
name: 'HelloWorld',
component: HelloWorld
}
]
})
二、路由懒加载,import()方法。(按需加载+js打包分离)
官方的一种按需加载的方法,点击的时候才会请求,减少首页加载时间。
import Vue from 'vue'
import Router from 'vue-router'
const HelloWorld = () => import('@/components/HelloWorld')
Vue.use(Router)
export default new Router({
routes: [
{
path: '/',
name: 'HelloWorld',
component: HelloWorld
}
]
})
三、vue的异步组件,require()方法。(按需加载)
vue的一种按需加载的方法,点击的时候才会请求,减少首页加载时间。
import Vue from 'vue'
import Router from 'vue-router'
Vue.use(Router)
export default new Router({
routes: [
{
path: '/',
name: 'HelloWorld',
component: resolve => require(['@/components/HelloWorld'], resolve),
}
]
})
四、vue的异步组件+webpack的ensure()方法。(按需加载+js打包分离
vue的一种按需加载的方法,webpack的ensure()方法实现js打包分离,每个组件单独打包,加载的时候文件不会太大。
import Vue from 'vue'
import Router from 'vue-router'
const HelloWorld = r => require.ensure([], () => r(require('@/components/HelloWorld')), 'HelloWorld')
Vue.use(Router)
export default new Router({
routes: [
{
path: '/',
name: 'HelloWorld',
component: HelloWorld
}
]
})
五、最优官方,懒加载和打包分离代码。(【官方推荐】按需加载+js打包分离
vue官方的一种方法,import()方法和增加webpackChunkName。
动态import()打包出来文件的name是按照0,1,2...依次排列,如0.js、1.js等,
有的时候我们希望打包出来的文件名是打包前的文件名称。
相同包名的js,会打包到一起。
1.需要安装 cnpm i -s @babel/plugin-syntax-dynamic-import
2.配置webpack,在webpack-base-conf.js的output加入chunkFilename: ‘[name].js’
import Vue from 'vue'
import Router from 'vue-router'
Vue.use(Router)
export default new Router({
routes: [
{
path: '/',
name: 'HelloWorld',
component: () => import(/* webpackChunkName: "HelloWorld" */ '@/components/HelloWorld')
}
]
})
正道的光终将来临,当太阳升起的时候,光芒总会普照大地温暖人间。些许的阴霾也终会有被阳光洒满的一天