vue子组件懒加载(按需加载)

 1.懒加载第一种情况

  • 有时候需要使用多个子组件的时候我们就可以使用子组件懒加载
  • 定义好所需要的子组件,在components中实现按需加载,也就是懒加载
const coms = {
		compSteps: resolve => {
			require(['@/pages/components/xxxx.vue'], resolve)
		},
		pInfo: resolve => {
			require(['@/pages/components/xxxx.vue'], resolve)
		},
		pForm: resolve => {
			require(['@/pages/components/xxx.vue'], resolve)
		},
		bisDialog: resolve => {
			require(['@/pages/components/xxx.vue'], resolve)
		},
	}
export default {
        components:coms
    }

2.懒加载第二种情况

  • 也可以直接在conponents里面直接实现懒加载
expore default {
        components:{
   childrenComp:require(['@/pages/components/xxxx.vue'], resolve)
        }
    }

  • 1
    点赞
  • 6
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
Vue2 组件懒加载是指在使用 Vue.js 开发项目时,将组件加载,而不是一次性加载全部组件。这样可以减少初始加载时间,提升页面的加载速度和性能。 在 Vue2 中,懒加载可以通过使用异步组件和 Webpack 的代码分割功能来实现。具体步骤如下: 1. 创建异步组件:在定义组件时,可以使用 Vue 提供的工厂函数 `Vue.component`,将组件定义为一个函数,该函数返回一个 Promise 对象。Promise 对象在异步操作完成时会进行 resolve,将组件作为参数传递给 resolve 函数。 ```javascript Vue.component('MyComponent', () => import('./MyComponent.vue')); ``` 2. 在要使用组件的地方使用 `v-once` 指令加载组件:通过在组件所在的标签上添加 `v-once` 指令,当组件首次加载完成后会将组件的内容缓存起来,下一次组件重新加载时,会直接使用缓存中的内容,而不再重新渲染。 ```html <template> <div> <my-component v-once></my-component> </div> </template> ``` 3. 配置 Webpack:在使用 Webpack 打包时,要配置 `vue-loader` 插件来实现组件懒加载。在 `vue-loader` 配置中添加 `require.ensure` 函数,该函数可以将组件代码分割成独立的文件,要时再进行加载。 ```javascript module.exports = { ... module: { rules: [ ... { test: /\.vue$/, loader: 'vue-loader' }, ... ] }, resolve: { extensions: ['.js', '.vue'], alias: { 'vue$': 'vue/dist/vue.esm.js' } }, }; ``` 通过以上步骤,在使用 Vue2 开发项目时,可以使用组件懒加载来优化页面加载速度和性能,提升用户体验。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值