ssr-plugin-react 6.2.11 → 6.2.14

package/cjs/config/base.js

@@ -7,9 +7,9 @@ const webpack = require("webpack");
 const MiniCssExtractPlugin = require((0, ssr_server_utils_1.loadModuleFromFramework)('mini-css-extract-plugin'));
 const WebpackBar = require('webpackbar');
 const loadModule = ssr_server_utils_1.loadModuleFromFramework;
-const addBabelLoader = (chain, envOptions) => {
+const addBabelLoader = (chain, envOptions, isServer) => {
     var _a, _b;
-    const { babelOptions } = (0, ssr_server_utils_1.loadConfig)();
+    const { babelOptions, isDev } = (0, ssr_server_utils_1.loadConfig)();
     chain.use('babel-loader')
         .loader(loadModule('babel-loader'))
         .options({
@@ -41,7 +41,7 @@ const addBabelLoader = (chain, envOptions) => {
             [loadModule('@babel/plugin-proposal-private-methods'), { loose: true }],
             [loadModule('@babel/plugin-proposal-private-property-in-object'), { loose: true }],
             ...(_b = babelOptions === null || babelOptions === void 0 ? void 0 : babelOptions.plugins) !== null && _b !== void 0 ? _b : []
-        ]
+        ].concat((!isServer && isDev) ? loadModule('react-refresh/babel') : [])
     })
         .end();
 };
@@ -79,6 +79,13 @@ const getBaseConfig = (chain, isServer) => {
         .exclude
         .add(/node_modules|core-js/)
         .end();
+    chain.module
+        .rule('mjs')
+        .test(/\.mjs/)
+        .include
+        .add(/node_modules/).end()
+        .type('javascript/auto')
+        .end();
     const module = chain.module
         .rule('compileBabelForExtraModule')
         .test(/\.(js|mjs|jsx|ts|tsx)$/)
@@ -91,8 +98,8 @@ const getBaseConfig = (chain, isServer) => {
     else {
         babelForExtraModule = module.end().exclude.add(/core-js/).end();
     }
-    addBabelLoader(babelModule, envOptions);
-    addBabelLoader(babelForExtraModule, envOptions);
+    addBabelLoader(babelModule, envOptions, isServer);
+    addBabelLoader(babelForExtraModule, envOptions, isServer);
     (0, ssr_server_utils_1.setStyle)(chain, /\.css$/, {
         rule: 'css',
         isServer,

package/cjs/config/client.js

@@ -8,11 +8,12 @@ const base_1 = require("./base");
 const ModuleNotFoundPlugin = require('react-dev-utils/ModuleNotFoundPlugin');
 const safePostCssParser = require('postcss-safe-parser');
 const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
+const ReactRefreshWebpackPlugin = require('@pmmmwh/react-refresh-webpack-plugin');
 const generateAnalysis = Boolean(process.env.GENERATE_ANALYSIS);
 const loadModule = ssr_server_utils_1.loadModuleFromFramework;
 let asyncChunkMap = {};
 const getClientWebpack = (chain) => {
-    const { isDev, chunkName, getOutput, cwd, useHash, chainClientConfig } = (0, ssr_server_utils_1.loadConfig)();
+    const { isDev, chunkName, getOutput, cwd, useHash, chainClientConfig, host, fePort } = (0, ssr_server_utils_1.loadConfig)();
     const shouldUseSourceMap = isDev || Boolean(process.env.GENERATE_SOURCEMAP);
     const publicPath = (0, ssr_server_utils_1.getOutputPublicPath)();
     (0, base_1.getBaseConfig)(chain, false);
@@ -89,6 +90,14 @@ const getClientWebpack = (chain) => {
     chain.when(generateAnalysis, chain => {
         chain.plugin('analyze').use(BundleAnalyzerPlugin);
     });
+    chain.when(isDev, chain => {
+        chain.plugin('fast-refresh').use(new ReactRefreshWebpackPlugin({
+            overlay: {
+                sockHost: host,
+                sockPort: fePort
+            }
+        }));
+    });
     chain.plugin('WriteAsyncManifest').use(class WriteAsyncChunkManifest {
         apply(compiler) {
             compiler.hooks.watchRun.tap('thisCompilation', async () => {

package/cjs/entry/client-entry.js

@@ -10,7 +10,7 @@ const create_router_1 = require("./create-router");
 const context_1 = require("./context");
 const { FeRoutes, layoutFetch, App, PrefixRouterBase } = create_router_1.Routes;
 const clientRender = async () => {
-    var _a, _b, _c, _d;
+    var _a, _b;
     const IApp = App !== null && App !== void 0 ? App : function (props) {
         return props.children;
     };
@@ -30,9 +30,6 @@ const clientRender = async () => {
                         const WrappedComponent = (0, ssr_hoc_react_1.wrapComponent)(component);
                         return (React.createElement(react_router_dom_1.Route, { exact: true, key: path, path: path, render: () => React.createElement(WrappedComponent, { key: location.pathname }) }));
                     })))))), document.getElementById('app'));
-    if (!window.__USE_VITE__) {
-        (_d = (_c = module === null || module === void 0 ? void 0 : module.hot) === null || _c === void 0 ? void 0 : _c.accept) === null || _d === void 0 ? void 0 : _d.call(_c); // webpack 场景下的 hmr
-    }
 };
 exports.clientRender = clientRender;
 if (!window.__disableClientRender__) {

package/cjs/entry/server-entry.js

@@ -15,7 +15,7 @@ const { FeRoutes, layoutFetch, PrefixRouterBase, state } = create_router_1.Route
 const serialize = serializeWrap.default || serializeWrap;
 const serverRender = async (ctx, config) => {
     var _a;
-    const { cssOrder, jsOrder, dynamic, mode, parallelFetch, disableClientRender, prefix, isVite, isDev, clientPrefix } = config;
+    const { mode, parallelFetch, disableClientRender, prefix, isVite, isDev, clientPrefix } = config;
     let path = ctx.request.path; // 这里取 pathname 不能够包含 queryString
     const base = prefix !== null && prefix !== void 0 ? prefix : PrefixRouterBase; // 以开发者实际传入的为最高优先级
     if (base) {
@@ -28,14 +28,9 @@ const serverRender = async (ctx, config) => {
     If you create new folder or component file, please restart server by npm start
     `);
     }
-    let dynamicCssOrder = cssOrder;
-    if (dynamic) {
-        dynamicCssOrder = cssOrder.concat([`${routeItem.webpackChunkName}.css`]);
-        if (!isVite || (isVite && !isDev)) {
-            // call it when webpack mode or vite prod mode
-            dynamicCssOrder = await (0, ssr_server_utils_1.addAsyncChunk)(dynamicCssOrder, routeItem.webpackChunkName);
-        }
-    }
+    const { fetch, webpackChunkName, component } = routeItem;
+    const dynamicCssOrder = await (0, ssr_server_utils_1.getAsyncCssChunk)(ctx, webpackChunkName);
+    const dynamicJsOrder = await (0, ssr_server_utils_1.getAsyncJsChunk)(ctx);
     const manifest = await (0, ssr_server_utils_1.getManifest)(config);
     const injectCss = [];
     if (isVite && isDev) {
@@ -66,14 +61,13 @@ const serverRender = async (ctx, config) => {
                 __html: 'window.__USE_VITE__=true'
             } }),
         (isVite && isDev) && React.createElement("script", { type: "module", src: '/node_modules/ssr-plugin-react/esm/entry/client-entry.js', key: "vite-react-entry" }),
-        ...jsOrder.map(js => manifest[js]).map(item => item && React.createElement("script", { key: item, src: item, type: isVite ? 'module' : '' }))
+        ...dynamicJsOrder.map(js => manifest[js]).map(item => item && React.createElement("script", { key: item, src: item, type: isVite ? 'module' : '' }))
     ];
     const staticList = {
         injectCss,
         injectScript
     };
     const isCsr = !!(mode === 'csr' || ((_a = ctx.request.query) === null || _a === void 0 ? void 0 : _a.csr));
-    const { component, fetch } = routeItem;
     const Component = isCsr ? React.Fragment : (await component()).default;
     if (isCsr) {
         (0, ssr_server_utils_1.logGreen)(`Current path ${path} use csr render mode`);

package/cjs/tools/vite.js

@@ -6,7 +6,7 @@ const vite_1 = require("vite");
 const ssr_server_utils_1 = require("ssr-server-utils");
 const plugin_react_1 = require("@vitejs/plugin-react");
 const vite_plugin_style_import_1 = require("vite-plugin-style-import");
-const { getOutput, prefix, reactServerEntry, reactClientEntry, viteConfig, supportOptinalChaining, isDev, define, babelOptions } = (0, ssr_server_utils_1.loadConfig)();
+const { getOutput, reactServerEntry, reactClientEntry, viteConfig, supportOptinalChaining, isDev, define, babelOptions } = (0, ssr_server_utils_1.loadConfig)();
 const { clientOutPut, serverOutPut } = getOutput();
 const styleImportConfig = {
     include: ['**/*.vue', '**/*.ts', '**/*.js', '**/*.tsx', '**/*.jsx', /chunkName/],
@@ -51,14 +51,14 @@ const serverConfig = {
     },
     define: {
         __isBrowser__: false,
-        ...define === null || define === void 0 ? void 0 : define.server,
-        ...define === null || define === void 0 ? void 0 : define.base
+        ...define === null || define === void 0 ? void 0 : define.base,
+        ...define === null || define === void 0 ? void 0 : define.server
     }
 };
 exports.serverConfig = serverConfig;
 const clientConfig = {
     ...(0, ssr_server_utils_1.commonConfig)(),
-    base: isDev ? '/' : prefix,
+    base: isDev ? '/' : (0, ssr_server_utils_1.getOutputPublicPath)(),
     esbuild: {
         keepNames: true
     },
@@ -83,8 +83,8 @@ const clientConfig = {
     },
     define: {
         __isBrowser__: true,
-        ...define === null || define === void 0 ? void 0 : define.client,
-        ...define === null || define === void 0 ? void 0 : define.base
+        ...define === null || define === void 0 ? void 0 : define.base,
+        ...define === null || define === void 0 ? void 0 : define.client
     }
 };
 exports.clientConfig = clientConfig;

package/esm/config/base.js

@@ -4,9 +4,9 @@ import * as webpack from 'webpack';
 const MiniCssExtractPlugin = require(loadModuleFromFramework('mini-css-extract-plugin'));
 const WebpackBar = require('webpackbar');
 const loadModule = loadModuleFromFramework;
-const addBabelLoader = (chain, envOptions) => {
+const addBabelLoader = (chain, envOptions, isServer) => {
     var _a, _b;
-    const { babelOptions } = loadConfig();
+    const { babelOptions, isDev } = loadConfig();
     chain.use('babel-loader')
         .loader(loadModule('babel-loader'))
         .options({
@@ -38,7 +38,7 @@ const addBabelLoader = (chain, envOptions) => {
             [loadModule('@babel/plugin-proposal-private-methods'), { loose: true }],
             [loadModule('@babel/plugin-proposal-private-property-in-object'), { loose: true }],
             ...(_b = babelOptions === null || babelOptions === void 0 ? void 0 : babelOptions.plugins) !== null && _b !== void 0 ? _b : []
-        ]
+        ].concat((!isServer && isDev) ? loadModule('react-refresh/babel') : [])
     })
         .end();
 };
@@ -76,6 +76,13 @@ const getBaseConfig = (chain, isServer) => {
         .exclude
         .add(/node_modules|core-js/)
         .end();
+    chain.module
+        .rule('mjs')
+        .test(/\.mjs/)
+        .include
+        .add(/node_modules/).end()
+        .type('javascript/auto')
+        .end();
     const module = chain.module
         .rule('compileBabelForExtraModule')
         .test(/\.(js|mjs|jsx|ts|tsx)$/)
@@ -88,8 +95,8 @@ const getBaseConfig = (chain, isServer) => {
     else {
         babelForExtraModule = module.end().exclude.add(/core-js/).end();
     }
-    addBabelLoader(babelModule, envOptions);
-    addBabelLoader(babelForExtraModule, envOptions);
+    addBabelLoader(babelModule, envOptions, isServer);
+    addBabelLoader(babelForExtraModule, envOptions, isServer);
     setStyle(chain, /\.css$/, {
         rule: 'css',
         isServer,

package/esm/config/client.js

@@ -5,11 +5,12 @@ import { getBaseConfig } from './base';
 const ModuleNotFoundPlugin = require('react-dev-utils/ModuleNotFoundPlugin');
 const safePostCssParser = require('postcss-safe-parser');
 const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
+const ReactRefreshWebpackPlugin = require('@pmmmwh/react-refresh-webpack-plugin');
 const generateAnalysis = Boolean(process.env.GENERATE_ANALYSIS);
 const loadModule = loadModuleFromFramework;
 let asyncChunkMap = {};
 const getClientWebpack = (chain) => {
-    const { isDev, chunkName, getOutput, cwd, useHash, chainClientConfig } = loadConfig();
+    const { isDev, chunkName, getOutput, cwd, useHash, chainClientConfig, host, fePort } = loadConfig();
     const shouldUseSourceMap = isDev || Boolean(process.env.GENERATE_SOURCEMAP);
     const publicPath = getOutputPublicPath();
     getBaseConfig(chain, false);
@@ -86,6 +87,14 @@ const getClientWebpack = (chain) => {
     chain.when(generateAnalysis, chain => {
         chain.plugin('analyze').use(BundleAnalyzerPlugin);
     });
+    chain.when(isDev, chain => {
+        chain.plugin('fast-refresh').use(new ReactRefreshWebpackPlugin({
+            overlay: {
+                sockHost: host,
+                sockPort: fePort
+            }
+        }));
+    });
     chain.plugin('WriteAsyncManifest').use(class WriteAsyncChunkManifest {
         apply(compiler) {
             compiler.hooks.watchRun.tap('thisCompilation', async () => {

package/esm/entry/client-entry.js

@@ -7,7 +7,7 @@ import { Routes } from './create-router';
 import { AppContext } from './context';
 const { FeRoutes, layoutFetch, App, PrefixRouterBase } = Routes;
 const clientRender = async () => {
-    var _a, _b, _c, _d;
+    var _a, _b;
     const IApp = App !== null && App !== void 0 ? App : function (props) {
         return props.children;
     };
@@ -27,9 +27,6 @@ const clientRender = async () => {
                         const WrappedComponent = wrapComponent(component);
                         return (React.createElement(Route, { exact: true, key: path, path: path, render: () => React.createElement(WrappedComponent, { key: location.pathname }) }));
                     })))))), document.getElementById('app'));
-    if (!window.__USE_VITE__) {
-        (_d = (_c = module === null || module === void 0 ? void 0 : module.hot) === null || _c === void 0 ? void 0 : _c.accept) === null || _d === void 0 ? void 0 : _d.call(_c); // webpack 场景下的 hmr
-    }
 };
 if (!window.__disableClientRender__) {
     // 如果服务端直出的时候带上该记号，则默认不进行客户端渲染，将处理逻辑交给上层

package/esm/entry/server-entry.js

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { StaticRouter } from 'react-router-dom';
-import { findRoute, getManifest, logGreen, normalizePath, addAsyncChunk } from 'ssr-server-utils';
+import { findRoute, getManifest, logGreen, normalizePath, getAsyncCssChunk, getAsyncJsChunk } from 'ssr-server-utils';
 // @ts-expect-error
 import * as serializeWrap from 'serialize-javascript';
 // @ts-expect-error
@@ -12,7 +12,7 @@ const { FeRoutes, layoutFetch, PrefixRouterBase, state } = Routes;
 const serialize = serializeWrap.default || serializeWrap;
 const serverRender = async (ctx, config) => {
     var _a;
-    const { cssOrder, jsOrder, dynamic, mode, parallelFetch, disableClientRender, prefix, isVite, isDev, clientPrefix } = config;
+    const { mode, parallelFetch, disableClientRender, prefix, isVite, isDev, clientPrefix } = config;
     let path = ctx.request.path; // 这里取 pathname 不能够包含 queryString
     const base = prefix !== null && prefix !== void 0 ? prefix : PrefixRouterBase; // 以开发者实际传入的为最高优先级
     if (base) {
@@ -25,14 +25,9 @@ const serverRender = async (ctx, config) => {
     If you create new folder or component file, please restart server by npm start
     `);
     }
-    let dynamicCssOrder = cssOrder;
-    if (dynamic) {
-        dynamicCssOrder = cssOrder.concat([`${routeItem.webpackChunkName}.css`]);
-        if (!isVite || (isVite && !isDev)) {
-            // call it when webpack mode or vite prod mode
-            dynamicCssOrder = await addAsyncChunk(dynamicCssOrder, routeItem.webpackChunkName);
-        }
-    }
+    const { fetch, webpackChunkName, component } = routeItem;
+    const dynamicCssOrder = await getAsyncCssChunk(ctx, webpackChunkName);
+    const dynamicJsOrder = await getAsyncJsChunk(ctx);
     const manifest = await getManifest(config);
     const injectCss = [];
     if (isVite && isDev) {
@@ -63,14 +58,13 @@ const serverRender = async (ctx, config) => {
                 __html: 'window.__USE_VITE__=true'
             } }),
         (isVite && isDev) && React.createElement("script", { type: "module", src: '/node_modules/ssr-plugin-react/esm/entry/client-entry.js', key: "vite-react-entry" }),
-        ...jsOrder.map(js => manifest[js]).map(item => item && React.createElement("script", { key: item, src: item, type: isVite ? 'module' : '' }))
+        ...dynamicJsOrder.map(js => manifest[js]).map(item => item && React.createElement("script", { key: item, src: item, type: isVite ? 'module' : '' }))
     ];
     const staticList = {
         injectCss,
         injectScript
     };
     const isCsr = !!(mode === 'csr' || ((_a = ctx.request.query) === null || _a === void 0 ? void 0 : _a.csr));
-    const { component, fetch } = routeItem;
     const Component = isCsr ? React.Fragment : (await component()).default;
     if (isCsr) {
         logGreen(`Current path ${path} use csr render mode`);

package/esm/tools/vite.js

@@ -1,9 +1,9 @@
 var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o;
 import { build } from 'vite';
-import { loadConfig, chunkNamePlugin, rollupOutputOptions, manifestPlugin, commonConfig, asyncOptimizeChunkPlugin } from 'ssr-server-utils';
+import { loadConfig, chunkNamePlugin, rollupOutputOptions, manifestPlugin, commonConfig, asyncOptimizeChunkPlugin, getOutputPublicPath } from 'ssr-server-utils';
 import react from '@vitejs/plugin-react';
 import styleImport, { AndDesignVueResolve, VantResolve, ElementPlusResolve, NutuiResolve, AntdResolve } from 'vite-plugin-style-import';
-const { getOutput, prefix, reactServerEntry, reactClientEntry, viteConfig, supportOptinalChaining, isDev, define, babelOptions } = loadConfig();
+const { getOutput, reactServerEntry, reactClientEntry, viteConfig, supportOptinalChaining, isDev, define, babelOptions } = loadConfig();
 const { clientOutPut, serverOutPut } = getOutput();
 const styleImportConfig = {
     include: ['**/*.vue', '**/*.ts', '**/*.js', '**/*.tsx', '**/*.jsx', /chunkName/],
@@ -48,13 +48,13 @@ const serverConfig = {
     },
     define: {
         __isBrowser__: false,
-        ...define === null || define === void 0 ? void 0 : define.server,
-        ...define === null || define === void 0 ? void 0 : define.base
+        ...define === null || define === void 0 ? void 0 : define.base,
+        ...define === null || define === void 0 ? void 0 : define.server
     }
 };
 const clientConfig = {
     ...commonConfig(),
-    base: isDev ? '/' : prefix,
+    base: isDev ? '/' : getOutputPublicPath(),
     esbuild: {
         keepNames: true
     },
@@ -79,8 +79,8 @@ const clientConfig = {
     },
     define: {
         __isBrowser__: true,
-        ...define === null || define === void 0 ? void 0 : define.client,
-        ...define === null || define === void 0 ? void 0 : define.base
+        ...define === null || define === void 0 ? void 0 : define.base,
+        ...define === null || define === void 0 ? void 0 : define.client
     }
 };
 const viteStart = async () => {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ssr-plugin-react",
-  "version": "6.2.11",
+  "version": "6.2.14",
   "description": "plugin-react for ssr",
   "main": "./cjs/index.js",
   "module": "./esm/index.js",
@@ -34,6 +34,7 @@
     "@babel/plugin-proposal-optional-chaining": "^7.16.5",
     "@babel/plugin-transform-runtime": "^7.9.6",
     "@babel/preset-env": "^7.5.5",
+    "@pmmmwh/react-refresh-webpack-plugin": "^0.5.5",
     "@vitejs/plugin-react": "^1.0.0",
     "babel-loader": "^8.0.4",
     "babel-plugin-import": "1.13.3",
@@ -54,10 +55,11 @@
     "postcss-preset-env": "^7.0.0",
     "postcss-safe-parser": "^6.0.0",
     "react": "^17.0.1",
+    "react-dev-utils": "^11.0.4",
     "react-dom": "^17.0.0",
+    "react-refresh": "^0.12.0",
     "react-router": "^5.2.1",
     "react-router-dom": "^5.1.2",
-    "react-dev-utils": "^11.0.4",
     "serialize-javascript": "^6.0.0",
     "ssr-client-utils": "^6.2.7",
     "ssr-hoc-react": "^6.2.7",

package/src/config/base.ts

@@ -9,8 +9,8 @@ const MiniCssExtractPlugin = require(loadModuleFromFramework('mini-css-extract-p
 const WebpackBar = require('webpackbar')
 const loadModule = loadModuleFromFramework
 
-const addBabelLoader = (chain: WebpackChain.Rule<WebpackChain.Module>, envOptions: any) => {
-  const { babelOptions } = loadConfig()
+const addBabelLoader = (chain: WebpackChain.Rule<WebpackChain.Module>, envOptions: any, isServer: boolean) => {
+  const { babelOptions, isDev } = loadConfig()
   chain.use('babel-loader')
     .loader(loadModule('babel-loader'))
     .options({
@@ -42,7 +42,7 @@ const addBabelLoader = (chain: WebpackChain.Rule<WebpackChain.Module>, envOption
         [loadModule('@babel/plugin-proposal-private-methods'), { loose: true }],
         [loadModule('@babel/plugin-proposal-private-property-in-object'), { loose: true }],
         ...babelOptions?.plugins ?? []
-      ]
+      ].concat((!isServer && isDev) ? loadModule('react-refresh/babel') : [])
     })
     .end()
 }
@@ -85,6 +85,14 @@ const getBaseConfig = (chain: WebpackChain, isServer: boolean) => {
     .add(/node_modules|core-js/)
     .end()
 
+  chain.module
+    .rule('mjs')
+    .test(/\.mjs/)
+    .include
+    .add(/node_modules/).end()
+    .type('javascript/auto')
+    .end()
+
   const module = chain.module
     .rule('compileBabelForExtraModule')
     .test(/\.(js|mjs|jsx|ts|tsx)$/)
@@ -98,8 +106,8 @@ const getBaseConfig = (chain: WebpackChain, isServer: boolean) => {
     babelForExtraModule = module.end().exclude.add(/core-js/).end()
   }
 
-  addBabelLoader(babelModule, envOptions)
-  addBabelLoader(babelForExtraModule, envOptions)
+  addBabelLoader(babelModule, envOptions, isServer)
+  addBabelLoader(babelForExtraModule, envOptions, isServer)
 
   setStyle(chain, /\.css$/, {
     rule: 'css',

package/src/config/client.ts

@@ -7,12 +7,13 @@ import { getBaseConfig } from './base'
 const ModuleNotFoundPlugin = require('react-dev-utils/ModuleNotFoundPlugin')
 const safePostCssParser = require('postcss-safe-parser')
 const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin
+const ReactRefreshWebpackPlugin = require('@pmmmwh/react-refresh-webpack-plugin')
 const generateAnalysis = Boolean(process.env.GENERATE_ANALYSIS)
 const loadModule = loadModuleFromFramework
 let asyncChunkMap: Record<string, string[]> = {}
 
 const getClientWebpack = (chain: WebpackChain) => {
-  const { isDev, chunkName, getOutput, cwd, useHash, chainClientConfig } = loadConfig()
+  const { isDev, chunkName, getOutput, cwd, useHash, chainClientConfig, host, fePort } = loadConfig()
   const shouldUseSourceMap = isDev || Boolean(process.env.GENERATE_SOURCEMAP)
   const publicPath = getOutputPublicPath()
   getBaseConfig(chain, false)
@@ -92,6 +93,15 @@ const getClientWebpack = (chain: WebpackChain) => {
   chain.when(generateAnalysis, chain => {
     chain.plugin('analyze').use(BundleAnalyzerPlugin)
   })
+  chain.when(isDev, chain => {
+    chain.plugin('fast-refresh').use(new ReactRefreshWebpackPlugin({
+      overlay: {
+        sockHost: host,
+        sockPort: fePort
+      }
+    }))
+  })
+
   chain.plugin('WriteAsyncManifest').use(
     class WriteAsyncChunkManifest {
       apply (compiler: any) {

package/src/entry/client-entry.tsx

@@ -9,7 +9,6 @@ import { AppContext } from './context'
 
 const { FeRoutes, layoutFetch, App, PrefixRouterBase } = Routes as ReactRoutesType
 
-declare const module: any
 declare const window: IWindow
 
 const clientRender = async (): Promise<void> => {
@@ -44,9 +43,6 @@ const clientRender = async (): Promise<void> => {
     </BrowserRouter>
     , document.getElementById('app'))
 
-  if (!window.__USE_VITE__) {
-    module?.hot?.accept?.() // webpack 场景下的 hmr
-  }
 }
 if (!window.__disableClientRender__) {
   // 如果服务端直出的时候带上该记号，则默认不进行客户端渲染，将处理逻辑交给上层

package/src/entry/server-entry.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react'
 import { StaticRouter } from 'react-router-dom'
-import { findRoute, getManifest, logGreen, normalizePath, addAsyncChunk } from 'ssr-server-utils'
+import { findRoute, getManifest, logGreen, normalizePath, getAsyncCssChunk, getAsyncJsChunk } from 'ssr-server-utils'
 import { ISSRContext, IConfig, ReactRoutesType, ReactESMFeRouteItem } from 'ssr-types-react'
 // @ts-expect-error
 import * as serializeWrap from 'serialize-javascript'
@@ -14,7 +14,7 @@ const { FeRoutes, layoutFetch, PrefixRouterBase, state } = Routes as ReactRoutes
 const serialize = serializeWrap.default || serializeWrap
 
 const serverRender = async (ctx: ISSRContext, config: IConfig): Promise<React.ReactElement> => {
-  const { cssOrder, jsOrder, dynamic, mode, parallelFetch, disableClientRender, prefix, isVite, isDev, clientPrefix } = config
+  const { mode, parallelFetch, disableClientRender, prefix, isVite, isDev, clientPrefix } = config
   let path = ctx.request.path // 这里取 pathname 不能够包含 queryString
   const base = prefix ?? PrefixRouterBase // 以开发者实际传入的为最高优先级
   if (base) {
@@ -29,15 +29,9 @@ const serverRender = async (ctx: ISSRContext, config: IConfig): Promise<React.Re
     `)
   }
 
-  let dynamicCssOrder = cssOrder
-
-  if (dynamic) {
-    dynamicCssOrder = cssOrder.concat([`${routeItem.webpackChunkName}.css`])
-    if (!isVite || (isVite && !isDev)) {
-      // call it when webpack mode or vite prod mode
-      dynamicCssOrder = await addAsyncChunk(dynamicCssOrder, routeItem.webpackChunkName)
-    }
-  }
+  const { fetch, webpackChunkName, component } = routeItem
+  const dynamicCssOrder = await getAsyncCssChunk(ctx, webpackChunkName)
+  const dynamicJsOrder = await getAsyncJsChunk(ctx)
   const manifest = await getManifest(config)
 
   const injectCss: JSX.Element[] = []
@@ -71,7 +65,7 @@ const serverRender = async (ctx: ISSRContext, config: IConfig): Promise<React.Re
       __html: 'window.__USE_VITE__=true'
     }} />,
     (isVite && isDev) && <script type="module" src='/node_modules/ssr-plugin-react/esm/entry/client-entry.js' key="vite-react-entry" />,
-    ...jsOrder.map(js => manifest[js]).map(item => item && <script key={item} src={item} type={isVite ? 'module' : ''}/>)
+    ...dynamicJsOrder.map(js => manifest[js]).map(item => item && <script key={item} src={item} type={isVite ? 'module' : ''}/>)
   ]
   const staticList = {
     injectCss,
@@ -79,7 +73,6 @@ const serverRender = async (ctx: ISSRContext, config: IConfig): Promise<React.Re
   }
 
   const isCsr = !!(mode === 'csr' || ctx.request.query?.csr)
-  const { component, fetch } = routeItem
   const Component = isCsr ? React.Fragment : (await component()).default
 
   if (isCsr) {

package/src/tools/vite.ts

@@ -1,8 +1,8 @@
 import { build, UserConfig } from 'vite'
-import { loadConfig, chunkNamePlugin, rollupOutputOptions, manifestPlugin, commonConfig, asyncOptimizeChunkPlugin } from 'ssr-server-utils'
+import { loadConfig, chunkNamePlugin, rollupOutputOptions, manifestPlugin, commonConfig, asyncOptimizeChunkPlugin, getOutputPublicPath } from 'ssr-server-utils'
 import react from '@vitejs/plugin-react'
 import styleImport, { AndDesignVueResolve, VantResolve, ElementPlusResolve, NutuiResolve, AntdResolve } from 'vite-plugin-style-import'
-const { getOutput, prefix, reactServerEntry, reactClientEntry, viteConfig, supportOptinalChaining, isDev, define, babelOptions } = loadConfig()
+const { getOutput, reactServerEntry, reactClientEntry, viteConfig, supportOptinalChaining, isDev, define, babelOptions } = loadConfig()
 const { clientOutPut, serverOutPut } = getOutput()
 const styleImportConfig = {
   include: ['**/*.vue', '**/*.ts', '**/*.js', '**/*.tsx', '**/*.jsx', /chunkName/],
@@ -47,14 +47,14 @@ const serverConfig: UserConfig = {
   },
   define: {
     __isBrowser__: false,
-    ...define?.server,
-    ...define?.base
+    ...define?.base,
+    ...define?.server
   }
 }
 
 const clientConfig: UserConfig = {
   ...commonConfig(),
-  base: isDev ? '/' : prefix,
+  base: isDev ? '/' : getOutputPublicPath(),
   esbuild: {
     keepNames: true
   },
@@ -79,8 +79,8 @@ const clientConfig: UserConfig = {
   },
   define: {
     __isBrowser__: true,
-    ...define?.client,
-    ...define?.base
+    ...define?.base,
+    ...define?.client
   }
 }
 const viteStart = async () => {