你的提案是否与问题相关？

使用基于路由的代码拆分会导致CSS重复。
重现步骤：

1. 使用create-react-app创建一个简单的应用。
2. 使用react-router-dom进行客户端路由。
3. 添加一个带有本地CSS的通用组件。
4. 添加2个页面，使用带有样式覆盖的通用组件。
5. 运行构建命令。
6. 检查静态文件夹。

// /components/CommonPageHeader/CommonPageHeader.module.scss
.header {
  color: black;
}

// /components/CommonPageHeader/CommonPageHeader.tsx
import styles from "./CommonPageHeader.module.scss";
import { ReactNode } from "react";

export const CommonPageHeader = (props: {
  className: string;
  children: ReactNode;`your text`
}) => {
  const { className = "", children } = props;

  return <h1 className={`${styles.header} ${className}`}>{children}</h1>;
};

// /pages/Home/Home.module.scss
.greenHeader {
  color: green;
}

// /pages/Home/Home.tsx
import React from "react";
import { Link } from "react-router-dom";
import { CommonPageHeader } from "../../components/CommonPageHeader/CommonPageHeader";
import styles from "./Home.module.scss";

const Home = () => (
  <>
    <CommonPageHeader className={styles.greenHeader}>
      I'm a green header
    </CommonPageHeader>
    <Link to={"some-page"}>Some page</Link>
  </>
);
export default Home;

// /pages/SomePage/SomePage.module.scss
.redHeader {
  color: red;
}

// /pages/SomePage/SomePage.tsx
import React from "react";
import { Link } from "react-router-dom";
import { CommonPageHeader } from "../../components/CommonPageHeader/CommonPageHeader";
import styles from "./SomePage.module.scss";

const SomePage = () => {
  return (
    <>
      <CommonPageHeader className={styles.redHeader}>
        I'm a red header
      </CommonPageHeader>
      <Link to={"/"}>Home</Link>
    </>
  );
};
export default SomePage;

// index.tsx

import React, { Suspense } from "react";
import ReactDOM from "react-dom/client";
import { createBrowserRouter, RouterProvider } from "react-router-dom";

const Home = React.lazy(() => import("./pages/Home/Home"));
const SomePage = React.lazy(() => import("./pages/SomePage/SomePage"));

const router = createBrowserRouter([
  {
    path: "/",
    element: (
      <Suspense>
        <Home />
      </Suspense>
    ),
  },
  {
    path: "/some-page",
    element: (
      <Suspense>
        <SomePage />
      </Suspense>
    ),
  },
]);

const root = ReactDOM.createRoot(
  document.getElementById("root") as HTMLElement
);
root.render(
  <React.StrictMode>
    <RouterProvider router={router} />
  </React.StrictMode>
);

在生产环境中，你会得到带有重复的CSS块和意外的样式覆盖：

// /build/static/css/499.408c3ff0.chunk.css
.CommonPageHeader_header__eTauC {
    color: #000
}

.Home_greenHeader__YwF4H {
    color: green
}

// /build/static/css/136.855973ab.chunk.css
.CommonPageHeader_header__eTauC {
    color: #000
}

.SomePage_redHeader__a-I8c {
    color: red
}

2022-10-28.17.19.47.mov
Demo page

1. 点击某个页面链接。
2. 返回主页。
   Repo

描述你希望的解决方案

在webpack.config.js中添加splitChunks优化。例如：

module.exports = function (webpackEnv) {
  // ...
  return {
    // ...
    optimization: {
      // ...
      splitChunks: {
        cacheGroups: {
          commons: {
            name: "common",
            type: "css/mini-extract",
            chunks: "all",
            minChunks: 2,
            enforce: true,
            usedExports: true,
          },
        },
      },
    },
  };
};