build(vite): code split on react and react-dom

Author: exuanbo

scripts/splitVendorChunk.js

@@ -3,12 +3,56 @@
 /** @import * as Rollup from 'rollup' */
 /** @import * as Vite from 'vite' */
 
-export {}
+import { createRequire } from 'node:module'
+import { join } from 'node:path'
+
+import { isCSSRequest } from 'vite'
 
 /**
+ * Modified from Vite deprecated splitVendorChunk plugin
+ * @see {@link https://github.com/vitejs/vite/blob/main/packages/vite/src/node/plugins/splitVendorChunk.ts}
+ * @license {@link https://github.com/vitejs/vite/blob/main/LICENSE | MIT}
+ *
  * @returns {Vite.Plugin}
  */
 export default function splitVendorChunk() {
+  const frameworkPaths = getTopLevelFrameworkPaths(['react', 'react-dom'])
+
+  /**
+   * @type {Rollup.GetManualChunk}
+   */
+  const manualChunks = (id, { getModuleInfo }) => {
+    if (
+      !isCSSRequest(id)
+      && isInNodeModules(id)
+      && isStaticImported(id)) {
+      if (frameworkPaths.some((path) => id.includes(path))) {
+        return 'framework'
+      }
+      return 'vendor'
+    }
+
+    /**
+     * @param {string} moduleId
+     * @param {string[]} importStack
+     * @returns {boolean}
+     */
+    function isStaticImported(moduleId, importStack = []) {
+      if (importStack.includes(moduleId)) {
+        return false
+      }
+      const moduleInfo = getModuleInfo(moduleId)
+      if (!moduleInfo) {
+        return false
+      }
+      if (moduleInfo.isEntry) {
+        return true
+      }
+      return moduleInfo.importers.some((importerId) =>
+        isStaticImported(importerId, importStack.concat(moduleId)))
+    }
+  }
+
   return {
     name: 'split-vendor-chunk',
     config() {
@@ -23,38 +67,6 @@ export default function splitVendorChunk() {
   }
 }
 
-/**
- * @type {Rollup.GetManualChunk}
- */
-const manualChunks = (id, { getModuleInfo }) => {
-  if (
-    isInNodeModules(id)
-    && !isCSSRequest(id)
-    && isStaticImported(id)) {
-    return 'vendor'
-  }
-
-  /**
-   * @param {string} moduleId
-   * @param {string[]} importStack
-   * @returns {boolean}
-   */
-  function isStaticImported(moduleId, importStack = []) {
-    if (importStack.includes(moduleId)) {
-      return false
-    }
-    const moduleInfo = getModuleInfo(moduleId)
-    if (!moduleInfo) {
-      return false
-    }
-    if (moduleInfo.isEntry) {
-      return true
-    }
-    return moduleInfo.importers.some((importerId) =>
-      isStaticImported(importerId, importStack.concat(moduleId)))
-  }
-}
-
 /**
  * @param {string} id
  * @returns {boolean}
@@ -64,11 +76,59 @@ function isInNodeModules(id) {
 }
 
 /**
- * @param {string} request
- * @returns {boolean}
+ * Modified from Sukka's webpack config
+ * @see {@link https://blog.skk.moe/post/webpack-react-without-create-react-app/#splitChunks}
+ * @license {@link https://creativecommons.org/licenses/by-nc-sa/4.0/deed.zh | CC BY-NC-SA 4.0}
+ *
+ * @param {string[]} packages
+ * @param {string=} directory
+ * @returns {string[]}
  */
-function isCSSRequest(request) {
-  return CSS_LANGS_RE.test(request)
-}
+function getTopLevelFrameworkPaths(packages, directory = import.meta.dirname) {
+  const require = createRequire(import.meta.url)
+
+  /** @type {string[]} */
+  const toplevelPaths = []
+
+  /** @type {Set<string>} */
+  const visitedPackages = new Set()
+
+  /**
+   * @param {string} packageName
+   * @param {string} relativePath
+   */
+  function addPath(packageName, relativePath) {
+    try {
+      if (visitedPackages.has(packageName)) {
+        return
+      }
+      visitedPackages.add(packageName)
 
-const CSS_LANGS_RE = /\.(css|less|sass|scss|styl|stylus|pcss|postcss|sss)(?:$|\?)/
+      const packageJsonPath = require.resolve(`${packageName}/package.json`, {
+        paths: [relativePath],
+      })
+
+      const packagePath = join(packageJsonPath, '../')
+      if (toplevelPaths.includes(packagePath)) {
+        return
+      }
+      toplevelPaths.push(packagePath)
+
+      const { dependencies } = require(packageJsonPath)
+      if (dependencies) {
+        Object.keys(dependencies).forEach((dependencyName) => {
+          addPath(dependencyName, packagePath)
+        })
+      }
+    }
+    catch {
+      // ignore
+    }
+  }
+
+  packages.forEach((packageName) => {
+    addPath(packageName, directory)
+  })
+
+  return toplevelPaths
+}

uno.config.ts

@@ -4,6 +4,8 @@ import transformerDirectives from '@unocss/transformer-directives'
 import transformerVariantGroup from '@unocss/transformer-variant-group'
 import { defineConfig } from 'unocss'
 
+// TODO: self-host fonts
+
 export default defineConfig({
   blocklist: ['?', 'px', 'static'],
   presets: [

vite.config.ts

@@ -12,10 +12,6 @@ import split from './scripts/splitVendorChunk'
 
 export const baseConfig = defineConfig({
   base: './',
-  build: {
-    // TODO: use `rollupOptions.output.manualChunks`
-    chunkSizeWarningLimit: 1000,
-  },
   define: {},
   plugins: [
     unocss(),