wip(app): asset

packages/shims-node.d.ts

@@ -13,5 +13,6 @@ declare namespace NodeJS {
     UNI_RENDERER?: 'native'
     UNI_NVUE_COMPILER: 'uni-app' | 'weex' | 'vue'
     UNI_NVUE_STYLE_COMPILER: 'uni-app' | 'weex'
+    UNI_APP_CODE_SPLITING?: 'true'
   }
 }

packages/uni-app-plus/dist/uni-app-service.es.js

@@ -6154,7 +6154,7 @@ var serviceContext = (function (vue) {
       baseCheckIsSupportSoterAuthentication(resolve);
   });
   const basecheckIsSoterEnrolledInDevice = ({ checkAuthMode, resolve, reject, }) => {
-      const wrapReject = (errMsg, errRes) => reject && reject(errMsg, ...errRes);
+      const wrapReject = (errMsg, errRes) => reject && reject(errMsg, errRes);
       const wrapResolve = (res) => resolve && resolve(res);
       if (checkAuthMode === 'fingerPrint') {
           if (checkIsSupportFingerPrint()) {

packages/uni-app-plus/dist/uni-app-view.umd.js

@@ -14852,7 +14852,7 @@
   var canvas = "uni-canvas {\n  width: 300px;\n  height: 150px;\n  display: block;\n  position: relative;\n}\n\nuni-canvas > .uni-canvas-canvas {\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n}\n";
   class UniCanvas extends UniComponent {
     constructor(id2, parentNodeId, refNodeId, nodeJson) {
-      super(id2, "uni-canvas", Canvas, parentNodeId, refNodeId, nodeJson, "canvas > div");
+      super(id2, "uni-canvas", Canvas, parentNodeId, refNodeId, nodeJson, "uni-canvas > div");
     }
   }
   var checkbox = "uni-checkbox {\n  -webkit-tap-highlight-color: transparent;\n  display: inline-block;\n  cursor: pointer;\n}\n\nuni-checkbox[hidden] {\n  display: none;\n}\n\nuni-checkbox[disabled] {\n  cursor: not-allowed;\n}\n\n.uni-checkbox-wrapper {\n  display: inline-flex;\n  align-items: center;\n  vertical-align: middle;\n}\n\n.uni-checkbox-input {\n  margin-right: 5px;\n  -webkit-appearance: none;\n          appearance: none;\n  outline: 0;\n  border: 1px solid #d1d1d1;\n  background-color: #ffffff;\n  border-radius: 3px;\n  width: 22px;\n  height: 22px;\n  position: relative;\n}\n\n.uni-checkbox-input svg {\n  color: #007aff;\n  font-size: 22px;\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -48%) scale(0.73);\n}\n\nuni-checkbox:not([disabled]) .uni-checkbox-input:hover {\n  border-color: #007aff;\n}\n\n.uni-checkbox-input.uni-checkbox-input-disabled {\n  background-color: #e1e1e1;\n}\n\n.uni-checkbox-input.uni-checkbox-input-disabled:before {\n  color: #adadad;\n}\n\nuni-checkbox-group {\n  display: block;\n}\n";

packages/uni-app-vite/dist/index.js

 "use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
 Object.defineProperty(exports, "__esModule", { value: true });
-const fs_1 = __importDefault(require("fs"));
 const uni_cli_shared_1 = require("@dcloudio/uni-cli-shared");
 const plugin_1 = require("./plugin");
 const copy_1 = require("./plugins/copy");
@@ -20,9 +16,4 @@ const plugins = [
     uni_cli_shared_1.uniViteInjectPlugin(uni_cli_shared_1.initProvide()),
     plugin_1.UniAppPlugin,
 ];
-if (!process.env.UNI_APP_CODE_SPLITING) {
-    plugins.push(uni_cli_shared_1.uniCssPlugin({
-        app: fs_1.default.readFileSync(require.resolve('@dcloudio/uni-app-plus/dist/style.css'), 'utf8'),
-    }));
-}
 exports.default = plugins;

packages/uni-app-vite/dist/plugin/configResolved.js

@@ -3,11 +3,9 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.configResolved = void 0;
 const uni_cli_shared_1 = require("@dcloudio/uni-cli-shared");
 const configResolved = (config) => {
-    // 移除 vite 内置的 css post 处理，交由 @dcloudio/uni-cli-shared 的 uniCssPlugin 实现
-    uni_cli_shared_1.removePlugins(['vite:css-post'], config);
-    // removePlugins('vite:import-analysis', config)
-    // injectCssPlugin(config)
-    // injectCssPostPlugin(config)
-    // injectAssetPlugin(config)
+    uni_cli_shared_1.removePlugins('vite:import-analysis', config);
+    uni_cli_shared_1.injectCssPlugin(config);
+    uni_cli_shared_1.injectCssPostPlugin(config);
+    uni_cli_shared_1.injectAssetPlugin(config);
 };
 exports.configResolved = configResolved;

packages/uni-app-vite/dist/plugins/mainJs.js

@@ -23,8 +23,8 @@ function uniMainJsPlugin() {
 }
 exports.uniMainJsPlugin = uniMainJsPlugin;
 function createApp(code) {
-    return `const __app__=createApp().app;__app__._component.render=()=>{};__app__.use(uni.__vuePlugin).mount("#app");${code.replace('createSSRApp', 'createVueApp as createSSRApp')}`;
+    return `const __app__=createApp().app;__app__._component.mpType='app';__app__._component.render=()=>{};__app__.use(uni.__vuePlugin).mount("#app");${code.replace('createSSRApp', 'createVueApp as createSSRApp')}`;
 }
 function createLegacyApp(code) {
-    return `function createApp(rootComponent,rootProps){const app=createVueApp(rootComponent,rootProps).use(uni.__vuePlugin);app.render=()=>{};const oldMount=app.mount;app.mount=(container)=>{const appVm=oldMount.call(app,container);return appVm;};return app;};${code.replace('createApp', 'createVueApp')}`;
+    return `function createApp(rootComponent,rootProps){rootComponent.mpTye='app';const app=createVueApp(rootComponent,rootProps).use(uni.__vuePlugin);app.render=()=>{};const oldMount=app.mount;app.mount=(container)=>{const appVm=oldMount.call(app,container);return appVm;};return app;};${code.replace('createApp', 'createVueApp')}`;
 }

packages/uni-app-vite/src/index.ts

-import fs from 'fs'
-import {
-  initProvide,
-  uniCssPlugin,
-  uniViteInjectPlugin,
-} from '@dcloudio/uni-cli-shared'
+import { initProvide, uniViteInjectPlugin } from '@dcloudio/uni-cli-shared'
 import { UniAppPlugin } from './plugin'
 import { uniCopyPlugin } from './plugins/copy'
 import { uniMainJsPlugin } from './plugins/mainJs'
@@ -20,14 +15,4 @@ const plugins = [
   uniViteInjectPlugin(initProvide()),
   UniAppPlugin,
 ]
-if (!process.env.UNI_APP_CODE_SPLITING) {
-  plugins.push(
-    uniCssPlugin({
-      app: fs.readFileSync(
-        require.resolve('@dcloudio/uni-app-plus/dist/style.css'),
-        'utf8'
-      ),
-    })
-  )
-}
 export default plugins

packages/uni-app-vite/src/plugin/configResolved.ts

@@ -2,17 +2,14 @@ import { Plugin } from 'vite'
 
 import {
   removePlugins,
-  // injectAssetPlugin,
-  // injectCssPlugin,
-  // injectCssPostPlugin,
+  injectAssetPlugin,
+  injectCssPlugin,
+  injectCssPostPlugin,
 } from '@dcloudio/uni-cli-shared'
 
 export const configResolved: Plugin['configResolved'] = (config) => {
-  // 移除 vite 内置的 css post 处理，交由 @dcloudio/uni-cli-shared 的 uniCssPlugin 实现
-  removePlugins(['vite:css-post'], config)
-
-  // removePlugins('vite:import-analysis', config)
-  // injectCssPlugin(config)
-  // injectCssPostPlugin(config)
-  // injectAssetPlugin(config)
+  removePlugins('vite:import-analysis', config)
+  injectCssPlugin(config)
+  injectCssPostPlugin(config)
+  injectAssetPlugin(config)
 }

packages/uni-app-vite/src/plugins/mainJs.ts

@@ -21,14 +21,14 @@ export function uniMainJsPlugin() {
 }
 
 function createApp(code: string) {
-  return `const __app__=createApp().app;__app__._component.render=()=>{};__app__.use(uni.__vuePlugin).mount("#app");${code.replace(
+  return `const __app__=createApp().app;__app__._component.mpType='app';__app__._component.render=()=>{};__app__.use(uni.__vuePlugin).mount("#app");${code.replace(
     'createSSRApp',
     'createVueApp as createSSRApp'
   )}`
 }
 
 function createLegacyApp(code: string) {
-  return `function createApp(rootComponent,rootProps){const app=createVueApp(rootComponent,rootProps).use(uni.__vuePlugin);app.render=()=>{};const oldMount=app.mount;app.mount=(container)=>{const appVm=oldMount.call(app,container);return appVm;};return app;};${code.replace(
+  return `function createApp(rootComponent,rootProps){rootComponent.mpTye='app';const app=createVueApp(rootComponent,rootProps).use(uni.__vuePlugin);app.render=()=>{};const oldMount=app.mount;app.mount=(container)=>{const appVm=oldMount.call(app,container);return appVm;};return app;};${code.replace(
     'createApp',
     'createVueApp'
   )}`

packages/uni-cli-shared/src/json/app/manifest/env.ts

+export function getAppRenderer(manifestJson: Record<string, any>) {
+  const platformOptions = manifestJson['app-plus']
+  if (platformOptions && platformOptions.renderer === 'native') {
+    return 'native'
+  }
+  return ''
+}
+
+export function getAppCodeSpliting(manifestJson: Record<string, any>) {
+  if (manifestJson['app-plus']?.optimization?.codeSpliting === true) {
+    return true
+  }
+  return false
+}

packages/uni-cli-shared/src/json/app/manifest/index.ts

@@ -35,8 +35,9 @@ export function normalizeAppManifestJson(
   return manifestJson
 }
 
+export { getAppRenderer, getAppCodeSpliting } from './env'
+
 export {
-  getRenderer,
   getNVueCompiler,
   getNVueStyleCompiler,
   getNVueFlexDirection,

packages/uni-cli-shared/src/json/app/manifest/nvue.ts

@@ -3,14 +3,6 @@ export function initNVue(
   pagesJson: UniApp.PagesJson
 ) {}
 
-export function getRenderer(manifestJson: Record<string, any>) {
-  const platformOptions = manifestJson['app-plus']
-  if (platformOptions && platformOptions.renderer === 'native') {
-    return 'native'
-  }
-  return ''
-}
-
 export function getNVueCompiler(manifestJson: Record<string, any>) {
   const platformOptions = manifestJson['app-plus']
   if (platformOptions) {

packages/uni-cli-shared/src/vite/plugins/css.ts

 import path from 'path'
 import debug from 'debug'
-import { Plugin, ResolvedConfig } from 'vite'
+import { Plugin } from 'vite'
 import { normalizePath, resolveMainPathOnce } from '../../utils'
 import { EXTNAME_VUE_RE } from '../../constants'
-import { minifyCSS } from './vitejs/plugins/css'
 
 const cssLangs = `\\.(css|less|sass|scss|styl|stylus|pcss|postcss)($|\\?)`
 const cssLangRE = new RegExp(cssLangs)
@@ -38,12 +37,8 @@ interface UniCssPluginOptions {
 export function uniCssPlugin({ app }: UniCssPluginOptions): Plugin {
   const styles: Map<string, string> = new Map<string, string>()
   let cssChunks: Map<string, Set<string>>
-  let resolvedConfig: ResolvedConfig
   return {
     name: 'vite:uni-app-css',
-    configResolved(config) {
-      resolvedConfig = config
-    },
     buildStart() {
       cssChunks = new Map<string, Set<string>>()
     },
@@ -105,9 +100,9 @@ export function uniCssPlugin({ app }: UniCssPluginOptions): Plugin {
       for (const fileName of cssChunks.keys()) {
         let source =
           (fileName === 'app.css' ? app + '\n' : '') + genCssCode(fileName)
-        if (resolvedConfig.build.minify) {
-          source = await minifyCSS(source, resolvedConfig)
-        }
+        // if (resolvedConfig.build.minify) {
+        //   source = await minifyCSS(source, resolvedConfig)
+        // }
         this.emitFile({
           fileName,
           type: 'asset',

packages/uni-cli-shared/src/vite/plugins/vitejs/plugins/asset.ts

@@ -176,7 +176,7 @@ function fileToBuiltUrl(
   const contentHash = getAssetHash(content)
   const { search, hash } = parseUrl(id)
   const postfix = (search || '') + (hash || '')
-  const fileName = '/' + path.posix.relative(process.env.UNI_INPUT_DIR, id)
+  const fileName = path.posix.relative(process.env.UNI_INPUT_DIR, id)
   if (!map.has(contentHash)) {
     map.set(contentHash, fileName)
   }

packages/uni-cli-shared/src/vite/plugins/vitejs/plugins/css.ts

@@ -15,25 +15,10 @@ import {
 import { Plugin } from '../plugin'
 import { ResolvedConfig } from '../config'
 import postcssrc from 'postcss-load-config'
-import {
-  NormalizedOutputOptions,
-  OutputChunk,
-  RenderedChunk,
-  RollupError,
-  SourceMap,
-} from 'rollup'
-import { dataToEsm } from '@rollup/pluginutils'
+import { PluginContext, RollupError, SourceMap } from 'rollup'
 import chalk from 'chalk'
-import { CLIENT_PUBLIC_PATH } from '../constants'
 import { ResolveFn, ViteDevServer } from '../'
-import {
-  getAssetFilename,
-  assetUrlRE,
-  registerAssetToChunk,
-  fileToUrl,
-  checkPublicFile,
-} from './asset'
-import MagicString from 'magic-string'
+import { fileToUrl, assetUrlRE, getAssetFilename } from './asset'
 import * as Postcss from 'postcss'
 import type Sass from 'sass'
 // We need to disable check of extraneous import which is buggy for stylus,
@@ -41,9 +26,10 @@ import type Sass from 'sass'
 import type Stylus from 'stylus'
 import type Less from 'less'
 import { Alias } from 'types/alias'
-import type { ModuleNode } from '../server/moduleGraph'
 import { transform, formatMessages } from 'esbuild'
 
+import { resolveMainPathOnce } from '../../../../utils'
+import { EXTNAME_VUE_RE } from '../../../../constants'
 // const debug = createDebugger('vite:css')
 
 export interface CSSOptions {
@@ -87,7 +73,6 @@ export const cssLangRE = new RegExp(cssLangs)
 const cssModuleRE = new RegExp(`\\.module${cssLangs}`)
 const directRequestRE = /(\?|&)direct\b/
 const commonjsProxyRE = /\?commonjs-proxy/
-const inlineRE = /(\?|&)inline\b/
 
 const enum PreprocessLang {
   less = 'less',
@@ -112,11 +97,6 @@ const cssModulesCache = new WeakMap<
   Map<string, Record<string, string>>
 >()
 
-export const chunkToEmittedCssFileMap = new WeakMap<
-  RenderedChunk,
-  Set<string>
->()
-
 const postcssConfigCache = new WeakMap<
   ResolvedConfig,
   PostCSSConfigResult | null
@@ -155,8 +135,9 @@ export function cssPlugin(config: ResolvedConfig): Plugin {
       }
 
       const urlReplacer: CssUrlReplacer = async (url, importer) => {
-        if (checkPublicFile(url, config)) {
-          return config.base + url.slice(1)
+        if (url.startsWith('/') && !url.startsWith('//')) {
+          // /static/logo.png => @/static/logo.png
+          url = '@' + url
         }
         const resolved = await resolveUrl(url, importer)
         if (resolved) {
@@ -188,44 +169,6 @@ export function cssPlugin(config: ResolvedConfig): Plugin {
         }
       }
 
-      // dev
-      if (server) {
-        // server only logic for handling CSS @import dependency hmr
-        const { moduleGraph } = server
-        const thisModule = moduleGraph.getModuleById(id)
-        if (thisModule) {
-          // CSS modules cannot self-accept since it exports values
-          const isSelfAccepting = !modules
-          if (deps) {
-            // record deps in the module graph so edits to @import css can trigger
-            // main import to hot update
-            const depModules = new Set<string | ModuleNode>()
-            for (const file of deps) {
-              depModules.add(
-                cssLangRE.test(file)
-                  ? moduleGraph.createFileOnlyEntry(file)
-                  : await moduleGraph.ensureEntryFromUrl(
-                      await fileToUrl(file, config, this)
-                    )
-              )
-            }
-            moduleGraph.updateModuleInfo(
-              thisModule,
-              depModules,
-              // The root CSS proxy module is self-accepting and should not
-              // have an explicit accept list
-              new Set(),
-              isSelfAccepting
-            )
-            for (const file of deps) {
-              this.addWatchFile(file)
-            }
-          } else {
-            thisModule.isSelfAccepting = isSelfAccepting
-          }
-        }
-      }
-
       return {
         code: css,
         // TODO CSS source map
@@ -235,255 +178,130 @@ export function cssPlugin(config: ResolvedConfig): Plugin {
   }
 }
 
+function normalizeCssChunkFilename(id: string) {
+  return normalizePath(
+    path.relative(
+      process.env.UNI_INPUT_DIR,
+      id.split('?')[0].replace(EXTNAME_VUE_RE, '.css')
+    )
+  )
+}
+
+function findCssModuleIds(
+  this: PluginContext,
+  moduleId: string,
+  cssModuleIds?: Set<string>
+) {
+  if (!cssModuleIds) {
+    cssModuleIds = new Set<string>()
+  }
+  const moduleInfo = this.getModuleInfo(moduleId)
+  if (moduleInfo) {
+    moduleInfo.importedIds.forEach((id) => {
+      if (id.includes('pages.json.js')) {
+        // 查询main.js时，需要忽略pages.json.js，否则会把所有页面样式加进来
+        return
+      }
+      if (cssLangRE.test(id) && !commonjsProxyRE.test(id)) {
+        cssModuleIds!.add(id)
+      } else {
+        findCssModuleIds.call(this, id, cssModuleIds)
+      }
+    })
+  }
+  return cssModuleIds
+}
+
 /**
  * Plugin applied after user plugins
  */
 export function cssPostPlugin(config: ResolvedConfig): Plugin {
   // styles initialization in buildStart causes a styling loss in watch
   const styles: Map<string, string> = new Map<string, string>()
-  let pureCssChunks: Set<string>
-
-  // when there are multiple rollup outputs and extracting CSS, only emit once,
-  // since output formats have no effect on the generated CSS.
-  let outputToExtractedCSSMap: Map<NormalizedOutputOptions, string>
-  let hasEmitted = false
-
+  let cssChunks: Map<string, Set<string>>
+  const viewCssCode = fs.readFileSync(
+    require.resolve('@dcloudio/uni-app-plus/dist/style.css'),
+    'utf8'
+  )
   return {
     name: 'vite:css-post',
-
     buildStart() {
-      // Ensure new caches for every build (i.e. rebuilding in watch mode)
-      pureCssChunks = new Set<string>()
-      outputToExtractedCSSMap = new Map<NormalizedOutputOptions, string>()
-      hasEmitted = false
+      cssChunks = new Map<string, Set<string>>()
     },
-
     async transform(css, id, ssr) {
       if (!cssLangRE.test(id) || commonjsProxyRE.test(id)) {
         return
       }
-
-      const inlined = inlineRE.test(id)
-      const modules = cssModulesCache.get(config)!.get(id)
-      const modulesCode =
-        modules && dataToEsm(modules, { namedExports: true, preferConst: true })
-
-      if (config.command === 'serve') {
-        if (isDirectCSSRequest(id)) {
-          return css
-        } else {
-          // server only
-          if (ssr) {
-            return modulesCode || `export default ${JSON.stringify(css)}`
-          }
-          if (inlined) {
-            return `export default ${JSON.stringify(css)}`
-          }
-          return [
-            `import { updateStyle, removeStyle } from ${JSON.stringify(
-              path.posix.join(config.base, CLIENT_PUBLIC_PATH)
-            )}`,
-            `const id = ${JSON.stringify(id)}`,
-            `const css = ${JSON.stringify(css)}`,
-            `updateStyle(id, css)`,
-            // css modules exports change on edit so it can't self accept
-            `${modulesCode || `import.meta.hot.accept()\nexport default css`}`,
-            `import.meta.hot.prune(() => removeStyle(id))`,
-          ].join('\n')
-        }
-      }
-
       // build CSS handling ----------------------------------------------------
-
-      // record css
-      if (!inlined) {
-        styles.set(id, css)
-      } else {
-        css = await minifyCSS(css, config)
-      }
-
+      styles.set(id, css)
       return {
-        code: modulesCode || `export default ${JSON.stringify(css)}`,
+        code: '',
         map: { mappings: '' },
         // avoid the css module from being tree-shaken so that we can retrieve
         // it in renderChunk()
-        moduleSideEffects: inlined ? false : 'no-treeshake',
+        moduleSideEffects: 'no-treeshake',
       }
     },
 
-    async renderChunk(code, chunk, opts) {
-      let chunkCSS = ''
-      let isPureCssChunk = true
-      const ids = Object.keys(chunk.modules)
-      for (const id of ids) {
-        if (
-          !isCSSRequest(id) ||
-          cssModuleRE.test(id) ||
-          commonjsProxyRE.test(id)
-        ) {
-          isPureCssChunk = false
-        }
-        if (styles.has(id)) {
-          chunkCSS += styles.get(id)
+    async generateBundle() {
+      const moduleIds = Array.from(this.getModuleIds())
+      const mainPath = resolveMainPathOnce(process.env.UNI_INPUT_DIR)
+      moduleIds.forEach((id) => {
+        if (id === mainPath) {
+          // 全局样式
+          cssChunks.set('app.css', findCssModuleIds.call(this, id))
+        } else if (id.includes('mpType=page')) {
+          // 页面样式
+          cssChunks.set(
+            normalizeCssChunkFilename(id),
+            findCssModuleIds.call(this, id)
+          )
         }
+      })
+      if (!cssChunks.size) {
+        return
       }
-
-      if (!chunkCSS) {
-        return null
-      }
-
       // resolve asset URL placeholders to their built file URLs and perform
       // minification if necessary
       const processChunkCSS = async (
         css: string,
         {
+          dirname,
           inlined,
           minify,
         }: {
+          dirname: string
           inlined: boolean
           minify: boolean
         }
       ) => {
         // replace asset url references with resolved url.
-        const isRelativeBase = config.base === '' || config.base.startsWith('.')
         css = css.replace(assetUrlRE, (_, fileHash, postfix = '') => {
-          const filename = getAssetFilename(fileHash, config) + postfix
-          registerAssetToChunk(chunk, filename)
-          if (!isRelativeBase || inlined) {
-            // absolute base or relative base but inlined (injected as style tag into
-            // index.html) use the base as-is
-            return config.base + filename
-          } else {
-            // relative base + extracted CSS - asset file will be in the same dir
-            return `./${path.posix.basename(filename)}`
-          }
+          return normalizePath(
+            path.relative(dirname, getAssetFilename(fileHash, config) + postfix)
+          )
         })
-        // only external @imports should exist at this point - and they need to
-        // be hoisted to the top of the CSS chunk per spec (#1845)
-        if (css.includes('@import')) {
-          css = await hoistAtImports(css)
-        }
         if (minify && config.build.minify) {
           css = await minifyCSS(css, config)
         }
         return css
       }
 
-      if (config.build.cssCodeSplit) {
-        if (isPureCssChunk) {
-          // this is a shared CSS-only chunk that is empty.
-          pureCssChunks.add(chunk.fileName)
-        }
-        if (opts.format === 'es' || opts.format === 'cjs') {
-          chunkCSS = await processChunkCSS(chunkCSS, {
-            inlined: false,
-            minify: true,
-          })
-          // emit corresponding css file
-          const fileHandle = this.emitFile({
-            name: chunk.name + '.css',
-            type: 'asset',
-            source: chunkCSS,
-          })
-          chunkToEmittedCssFileMap.set(
-            chunk,
-            new Set([this.getFileName(fileHandle)])
-          )
-        } else if (!config.build.ssr) {
-          // legacy build, inline css
-          chunkCSS = await processChunkCSS(chunkCSS, {
-            inlined: true,
-            minify: true,
-          })
-          const style = `__vite_style__`
-          const injectCode =
-            `var ${style} = document.createElement('style');` +
-            `${style}.innerHTML = ${JSON.stringify(chunkCSS)};` +
-            `document.head.appendChild(${style});`
-          if (config.build.sourcemap) {
-            const s = new MagicString(code)
-            s.prepend(injectCode)
-            return {
-              code: s.toString(),
-              map: s.generateMap({ hires: true }),
-            }
-          } else {
-            return { code: injectCode + code }
-          }
-        }
-      } else {
-        // non-split extracted CSS will be minified together
-        chunkCSS = await processChunkCSS(chunkCSS, {
-          inlined: false,
-          minify: false,
-        })
-        outputToExtractedCSSMap.set(
-          opts,
-          (outputToExtractedCSSMap.get(opts) || '') + chunkCSS
-        )
+      const genCssCode = (fileName: string) => {
+        return [...cssChunks.get(fileName)!]
+          .map((id) => styles.get(id) || '')
+          .join('\n')
       }
-      return null
-    },
-
-    async generateBundle(opts, bundle) {
-      // remove empty css chunks and their imports
-      if (pureCssChunks.size) {
-        const emptyChunkFiles = [...pureCssChunks]
-          .map((file) => path.basename(file))
-          .join('|')
-          .replace(/\./g, '\\.')
-        const emptyChunkRE = new RegExp(
-          opts.format === 'es'
-            ? `\\bimport\\s*"[^"]*(?:${emptyChunkFiles})";\n?`
-            : `\\brequire\\(\\s*"[^"]*(?:${emptyChunkFiles})"\\);\n?`,
-          'g'
+      for (const filename of cssChunks.keys()) {
+        let source = await processChunkCSS(
+          (filename === 'app.css' ? viewCssCode + '\n' : '') +
+            genCssCode(filename),
+          { dirname: path.dirname(filename), inlined: false, minify: true }
         )
-        for (const file in bundle) {
-          const chunk = bundle[file]
-          if (chunk.type === 'chunk') {
-            // remove pure css chunk from other chunk's imports,
-            // and also register the emitted CSS files under the importer
-            // chunks instead.
-            chunk.imports = chunk.imports.filter((file) => {
-              if (pureCssChunks.has(file)) {
-                const css = chunkToEmittedCssFileMap.get(
-                  bundle[file] as OutputChunk
-                )
-                if (css) {
-                  let existing = chunkToEmittedCssFileMap.get(chunk)
-                  if (!existing) {
-                    existing = new Set()
-                  }
-                  css.forEach((file) => existing!.add(file))
-                  chunkToEmittedCssFileMap.set(chunk, existing)
-                }
-                return false
-              }
-              return true
-            })
-            chunk.code = chunk.code.replace(
-              emptyChunkRE,
-              // remove css import while preserving source map location
-              (m) => `/* empty css ${''.padEnd(m.length - 15)}*/`
-            )
-          }
-        }
-        pureCssChunks.forEach((fileName) => {
-          delete bundle[fileName]
-        })
-      }
-
-      let extractedCss = outputToExtractedCSSMap.get(opts)
-      if (extractedCss && !hasEmitted) {
-        hasEmitted = true
-        // minify css
-        if (config.build.minify) {
-          extractedCss = await minifyCSS(extractedCss, config)
-        }
         this.emitFile({
-          name: 'style.css',
+          fileName: filename,
           type: 'asset',
-          source: extractedCss,
+          source,
         })
       }
     },
@@ -882,8 +700,8 @@ async function doUrlReplace(
 
   return `url(${wrap}${await replacer(rawUrl)}${wrap})`
 }
-// fixed by xxxxxx
-export async function minifyCSS(css: string, config: ResolvedConfig) {
+
+async function minifyCSS(css: string, config: ResolvedConfig) {
   const { code, warnings } = await transform(css, {
     loader: 'css',
     minify: true,
@@ -897,14 +715,6 @@ export async function minifyCSS(css: string, config: ResolvedConfig) {
   return code
 }
 
-// #1845
-// CSS @import can only appear at top of the file. We need to hoist all @import
-// to top when multiple files are concatenated.
-async function hoistAtImports(css: string) {
-  const postcss = await import('postcss')
-  return (await postcss.default([AtImportHoistPlugin]).process(css)).css
-}
-
 const AtImportHoistPlugin: Postcss.PluginCreator<any> = () => {
   return {
     postcssPlugin: 'vite-hoist-at-imports',

packages/uni-h5/dist/uni-h5.cjs.js

@@ -10204,7 +10204,7 @@ function createLayoutTsx(keepAliveRoute, layoutState, windowState, topWindow, le
   }, 8, ["class"]);
 }
 function useShowTabBar(emit2) {
-  const route = vueRouter.useRoute();
+  const route = usePageRoute();
   const tabBar2 = useTabBar();
   const showTabBar = vue.computed(() => route.meta.isTabBar && tabBar2.shown);
   return showTabBar;

packages/uni-h5/dist/uni-h5.es.js

@@ -18828,7 +18828,7 @@ function createLayoutTsx(keepAliveRoute, layoutState, windowState, topWindow, le
   }, 8, ["class"]);
 }
 function useShowTabBar(emit2) {
-  const route = useRoute();
+  const route = usePageRoute();
   const tabBar2 = useTabBar();
   const showTabBar2 = computed(() => route.meta.isTabBar && tabBar2.shown);
   updateCssVar({

packages/uni-h5/src/framework/components/layout/index.tsx

@@ -18,7 +18,7 @@ import {
   nextTick,
 } from 'vue'
 
-import { RouterView, useRoute } from 'vue-router'
+import { RouterView } from 'vue-router'
 
 import { defineSystemComponent } from '@dcloudio/uni-components'
 import { updateCssVar } from '@dcloudio/uni-core'
@@ -334,7 +334,7 @@ function createLayoutTsx(
 }
 
 function useShowTabBar(emit: SetupContext<['change']>['emit']) {
-  const route = useRoute()
+  const route = usePageRoute()
   const tabBar = useTabBar()!
   // TODO meida query
   const showTabBar = computed(() => route.meta.isTabBar && tabBar.shown)

packages/vite-plugin-uni/src/cli/nvue.ts

 import {
   parseManifestJsonOnce,
-  getRenderer,
+  getAppRenderer,
+  getAppCodeSpliting,
   getNVueCompiler,
   getNVueStyleCompiler,
 } from '@dcloudio/uni-cli-shared'
 
 export function initNVueEnv() {
   const manifestJson = parseManifestJsonOnce(process.env.UNI_INPUT_DIR)
-  if (getRenderer(manifestJson) === 'native') {
+  if (getAppRenderer(manifestJson) === 'native') {
     process.env.UNI_RENDERER = 'native'
   }
   const nvueCompiler = getNVueCompiler(manifestJson)
@@ -19,4 +20,7 @@ export function initNVueEnv() {
   if (getNVueStyleCompiler(manifestJson) === 'uni-app') {
     process.env.UNI_NVUE_STYLE_COMPILER = 'uni-app'
   }
+  if (getAppCodeSpliting(manifestJson)) {
+    process.env.UNI_APP_CODE_SPLITING = 'true'
+  }
 }