普通加载: 在父组件中先import子组件,然后在components模块中注册子组件,在进 入页面时,会随着加载当前页面的js文件就加载子组件的内容;子组件的内容和父组件的内容在同一个js文件;
按需加载:子组件显示的时候,才会去加载子组件的内容;子组件内容和当前页面的js不是一个文件;
v-if: 在条件为真时才去加载需要显示的组件;条件为真时元素才会渲染出来;
v-show: 不管条件是否为真,在一进入页面就会去加载组件;且页面上元素已经渲染了,只是将其隐藏而已;
组件引用时使用按需引入的方式
export default {
name: 'cascadeTest',
// 组件按需引入的写法
components: {
// cascadeTab: () => import('../components/cascade/cascadeTab/index')
cascadeTab: resolve => require.ensure([], () =>
resolve(require('../components/cascade/cascadeTab/index')), 'cascadeTab')
},
}
普通引入方式:
import cascadeTab from '../components/cascade/cascadeTab/index';
export default {
name: 'cascadeTest',
components: {
cascadeTab
}
}
使用按需引入时测试:
1) v-show=false或true时: 一进入当前页面就加载当前页面组件和页面的子组件
2)v-if=false时;只加载当前页面组件;
2)v-if=true时;进入当前页面就加载了当前页面组件的子组件;
全文参考:
Vue性能优化之组件按需加载(以及一些常见的性能优化方法) - 渴望成为大牛的男人 - 博客园