vue 如何实现业务组件的按需加载?

劉凯里
  • 822

问题描述

目前要实现一个模块,模块内部根据场景的不同渲染不同的业务组件,所以这个模块组件的作用是一个类似分发的功能。
所以我需要首先用 import 将所有场景下可能出现的组件都引入进来,然后定位在 components 对象中,是不是意味着不管我用没用到这些组件,已经把这些组件全部引入进来了?

比如下面的情况,HelloWorld 只会用到一种,但不管有没有用到,两个都被引入进来了

相关代码

// 这是一个 .vue 文件,就是上面提到的模块(也是组件),内部根据不同场景渲染不同的组件

<template>
    <div>
        <Hello v-if="isHello" />
        <World v-else />
    </div>
</template>

<script>
import Hello from './hello';
import World from './world';

export default {
    ...
    
    components: {Hello, World},
    
    ...
}
...

</script>

期待的结果

所以想实现:只有我真正用到的情况下,才会引入那个业务组件,暂时没有什么头绪,有大神指条路吗?

回复
阅读 3k
4 个回答

修改成如下即可,可以打开控制台试试。

<template>
    <div>
        <Hello v-if="isHello" />
        <World v-else />
    </div>
</template>

<script>
const Hello = () => import('./hello')
const World = () => import('./world')
export default {
    ...
    
    components: {Hello, World},
    
    ...
}
...

</script>

不知道懒加载是不是你想要的。

components: {

MyComponent:resolve => require(['@/components/path/mycomponent.vue'],resolve)

},

你都用了v-if指令了,也就是说你只需要根据你的业务场景不同修改v-if指令值即可啊。

Meteor__
  • 3
新手上路,请多包涵

参考Vue官方给的例子

异步组件

例子如下:

<template>
  <div class="container">
    <test v-if="display"></test>
    <test1></test1>
  </div>
</template>
<script>
// import test from '../../components/text'
// import test1 from '../../components/text1'
export default {
  components: {
    // test
    'test': () => import('../../components/text.vue'),
    'test1': () => import('../../components/text1.vue')
  },
  data() {
    return {
      display: false
    }
  }
}
</script>
<style lang="scss" scoped>
</style>

打包的时候可以看到,输出的文件如下:

我的项目输出的文件和普通项目的不一样,全部子页面都会打包成js文件,普通情况下只会输出一个js文件和一个css文件,无需纠结为什么我项目打包打出来的文件和你的不一样,只需知道按需加载确实在干活就是了。自己可以新开个Vue-cli里面搭个页面查看build后的结果。
  dist/index.umd.min.js      4.71 kb                 2.08 kb
  dist/index.umd.min.2.js    2.65 kb                 0.43 kb
  dist/index.umd.min.1.js    1.61 kb                 0.42 kb
辅以V-if控制,按照上述例子,打开浏览器会发现仅加载了index.umd.min.1.js和index.umd.min.js
后面这v-if判断变多了会存在大量的v-if,那就需要参考官方给的render渲染函数

render

宣传栏