在路由中使用
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 级别的代码分割
来源: http://www.bubuko.com/infodetail-3776009.html