vue render 函数渲染 promise 异步组件

时间：

分类：

vue

字数：

523 字

时长：

大约需要 2 分钟

次数：

0 人阅读

遇到此问题原因是想利用异步加载的方式，优化 vue cli 打包后的 app.xxx.js 文件大小，虽然最后并没有优化成功，但是方法值得学习。

题外话：chunk-vendors.xxx.js 可以利用 webpack 的 externals 属性优化打包大小。

vue render 函数本身并不支持异步渲染，好在官方 vue 2.3.0+ 之后新增了一个异步组件工厂函数，利用此方法可以实现 render 函数渲染异步组件。

常规使用

1
2
3
4
5
6
import Vue from 'vue'
import App from './App.vue'

new Vue({
  render: h => h(App)
}).$mount('#app')

在某些情况下，并不想使用 render 同步渲染，需要考虑使用异步加载的方式实现页面渲染，需要利用官方的异步组件工厂函数来实现。

异步组件渲染

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
import Vue from 'vue'

const App = () => ({
  // 需要加载的组件 (应该是一个 `Promise` 对象)
  component: import('./App.vue'),
  // 异步组件加载时使用的组件
  // loading: LoadingComponent,
  // 加载失败时使用的组件
  // error: ErrorComponent,
  // 展示加载时组件的延时时间。默认值是 200 (毫秒)
  delay: 200,
  // 如果提供了超时时间且组件加载也超时了，
  // 则使用加载失败时使用的组件。默认值是：`Infinity`
  timeout: 3000
})

new Vue({
  render: h => h(App)
}).$mount('#app')

官方的工厂函数还支持 loading 和 error 状态，已经完全够使用了。

以上方法还可以使用 webpack 来提取成单独的 js 文件，只需要在将 import('./App.vue') 改成 import( /* webpackChunkName: "App" */ './App.vue') 即可。

此方法已经能优化 app.xxx.js 文件大小，但是通过请求发现，优化后提取出的 js 文件在页面载入时会同步载入，并没起到异步加载的作用。

最后还是改回了原来同步方式，记录此方法用于学习。

本文由 linx(544819896@qq.com) 创作，采用 CC BY 4.0 CN协议 进行许可。 可自由转载、引用，但需署名作者且注明文章出处。本文链接为： https://blog.jijian.link/2021-05-20/vue-render-promise/

如果您觉得文章不错，可以点击文章中的广告支持一下！