在路由中使用
component:()=>import(/* webpackChunkName:"about" */‘../views/About.vue‘)
来实现组件的懒加载,这种配置会生产一个about.[hash].js
对于优化首屏很有帮助,但对于内部页面会有一点损失,比较资源不会一次加载到位的
const routes = [
{
path: ‘/‘,
name: ‘Home‘,
component: Home
},
{
path: ‘/about‘,
name: ‘About‘,
component: ()=> import(/* webpackChunkName: "about"*/ ‘../views/About.vue‘)
}
]
在开发时可以有选择性地懒加载,全部加载,这个属于是router级别的代码分割