vue异步组件

# vue 异步组件

异步组件就是定义的时候什么都不做，只在组件需要渲染（组件第一次显示）的时候进行加载渲染并缓存，缓存是以备下次访问。

在大型应用中，我们可能需要将应用分割成小一些的代码块，并且只在需要的时候才从服务器加载一个模块。为了简化，Vue 允许你以一个工厂函数的方式定义你的组件，这个工厂函数会异步解析你的组件定义。Vue 只有在这个组件需要被渲染的时候才会触发该工厂函数，且会把结果缓存起来供未来重渲染。

# 异步组件的三种写法

# 1. 工厂函数

// 全局组件注册
Vue.component('Home, function (resolve) {
  // 这个特殊的 `require` 语法将会告诉 webpack
  // 自动将你的构建代码切割成多个包，这些包
  // 会通过 Ajax 请求加载
  require(['./Home'], resolve)
})


// 局部组件注册
new Vue({
  components: {
    'Home': () => resolve => { require(['./Home'], resolve) }
  }
})

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

# 2. webpack 和 ES6 的`import`返回一个 Promise

// 下面2行代码，没有指定webpackChunkName，每个组件打包成一个js文件。
const ImportFuncDemo1 = () => import("../components/ImportFuncDemo1");
const ImportFuncDemo2 = () => import("../components/ImportFuncDemo2");
// 下面2行代码，指定了相同的webpackChunkName，会合并打包成一个js文件。
// const ImportFuncDemo = () => import(/* webpackChunkName: 'ImportFuncDemo' */ '../components/ImportFuncDemo')
// const ImportFuncDemo2 = () => import(/* webpackChunkName: 'ImportFuncDemo' */ '../components/ImportFuncDemo2')
export default new Router({
  routes: [
    {
      path: "/importfuncdemo1",
      name: "ImportFuncDemo1",
      component: ImportFuncDemo1,
    },
    {
      path: "/importfuncdemo2",
      name: "ImportFuncDemo2",
      component: ImportFuncDemo2,
    },
  ],
});

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

# 3. webpack 提供的 require.ensure

这种情况下，多个路由指定相同的 chunkName，会合并打包成一个 js 文件。

{
    path: '/promisedemo',
    name: 'PromiseDemo',
    component: r => require.ensure([], () => r(require('../components/PromiseDemo')), 'demo')
},
{
    path: '/hello',
    name: 'Hello',
    component: r => require.ensure([], () => r(require('../components/Hello')), 'demo')
}

1
2
3
4
5
6
7
8
9
10

参考：https://www.cnblogs.com/chenmeijiao/p/13156779.html (opens new window)

更新时间: 12/8/2021, 6:11:56 PM

← vue修饰符 vue插槽→