Vue组件懒加载
- 默认情况下,组件是在router/index.js头部这样加载的:
import index from '@/components/index'
@代表"src",在配置文件中默认配置了别名:
resolve: {
.......
alias: {
'vue$': 'vue/dist/vue.esm.js',
'@': resolve('src'),
}
},
这种写法会在加载首页时,加载所有组件,导致首页加载过慢,出现白屏
- 组件懒加载是在组件需要使用的时候才加载,不是在router/index.js头部就import,而是在路由表中import
const HelloWorld = ()=>import("@/components/HelloWorld")
export default new Router({
routes: [
{
path: '/',
name: 'HelloWorld',
component:HelloWorld
}
]
})