refactor: AsyncLoading, AsyncError

packages/uni-h5/src/framework/components/async-error/index.tsx

+import { defineComponent } from 'vue'
+import { useI18n, initI18nAsyncMsgsOnce } from '@dcloudio/uni-core'
+
+function reload() {
+  window.location.reload()
+}
+
+export default /*#__PURE__*/ defineComponent({
+  name: 'AsyncError',
+  setup() {
+    initI18nAsyncMsgsOnce()
+    const { t } = useI18n()
+    return () => (
+      <div class="uni-async-error" onClick={reload}>
+        {t('uni.async.error')}
+      </div>
+    )
+  },
+})

packages/uni-h5/src/framework/components/async-error/index.vue

-<template>
-  <div class="uni-async-error" @click="reload">{{ $$t("uni.async.error") }}</div>
-</template>
-<style>
-.uni-async-error {
-  position: absolute;
-  left: 0;
-  right: 0;
-  top: 0;
-  bottom: 0;
-  color: #999;
-  padding: 100px 10px;
-  text-align: center;
-}
-</style>
-<script>
-import {
-  useI18n,
-  initI18nAsyncMsgsOnce
-} from '@dcloudio/uni-core'
-
-export default {
-  name: 'AsyncError',
-  setup() {
-    initI18nAsyncMsgsOnce()
-    const { t } = useI18n()
-    return {
-      $$t: t,
-      reload() {
-        window.location.reload()
-      }
-    }
-  }
-}
-</script>

packages/uni-h5/src/framework/components/async-loading/index.ts

+import { createBlock, createVNode, defineComponent, openBlock } from 'vue'
+
+const clazz = { class: 'uni-async-loading' }
+const loadingVNode = /*#__PURE__*/ createVNode(
+  'i',
+  { class: 'uni-loading' },
+  null,
+  -1 /* HOISTED */
+)
+
+export default /*#__PURE__*/ defineComponent({
+  name: 'AsyncLoading',
+  render() {
+    return openBlock(), createBlock('div', clazz, [loadingVNode])
+  },
+})

packages/uni-h5/src/framework/components/async-loading/index.vue

-<template>
-  <div class="uni-async-loading">
-    <i class="uni-loading" />
-  </div>
-</template>
-<style>
-	.uni-async-loading {
-    box-sizing: border-box;
-		width: 100%;
-		padding: 50px;
-		text-align: center;
-	}
-
-	.uni-async-loading .uni-loading {
-		width: 30px;
-		height: 30px;
-	}
-</style>
-<script>
-export default {
-  name: 'AsyncLoading'
-}
-</script>

packages/uni-h5/src/index.ts

@@ -15,5 +15,5 @@ export { getApp, getCurrentPages } from './framework'
 
 export { default as LayoutComponent } from './framework/components/layout/index'
 export { default as PageComponent } from './framework/components/page/index'
-export { default as AsyncErrorComponent } from './framework/components/async-error/index.vue'
-export { default as AsyncLoadingComponent } from './framework/components/async-loading/index.vue'
+export { default as AsyncErrorComponent } from './framework/components/async-error/index'
+export { default as AsyncLoadingComponent } from './framework/components/async-loading'

packages/uni-h5/style/framework/async.css

+.uni-async-error {
+  position: absolute;
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  color: #999;
+  padding: 100px 10px;
+  text-align: center;
+}
+.uni-async-loading {
+  box-sizing: border-box;
+  width: 100%;
+  padding: 50px;
+  text-align: center;
+}
+
+.uni-async-loading .uni-loading {
+  width: 30px;
+  height: 30px;
+}

packages/vite-plugin-uni/src/configResolved/plugins/pagesJson.ts

@@ -113,6 +113,9 @@ function generateCssCode(
   const define = config.define! as FEATURE_DEFINES
   const cssFiles = [H5_FRAMEWORK_STYLE_PATH + 'base.css']
   if (define.__UNI_FEATURE_PAGES__) {
+    cssFiles.push(H5_FRAMEWORK_STYLE_PATH + 'async.css')
+  }
+  if (define.__UNI_FEATURE_RESPONSIVE__) {
     cssFiles.push(H5_FRAMEWORK_STYLE_PATH + 'layout.css')
   }
   if (define.__UNI_FEATURE_NAVIGATIONBAR__) {