你的提案是否与问题相关?
使用基于路由的代码拆分会导致CSS重复。
重现步骤:
- 使用create-react-app创建一个简单的应用。
- 使用react-router-dom进行客户端路由。
- 添加一个带有本地CSS的通用组件。
- 添加2个页面,使用带有样式覆盖的通用组件。
- 运行构建命令。
- 检查静态文件夹。
// /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
- 点击某个页面链接。
- 返回主页。
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,
},
},
},
},
};
};
2条答案
按热度按时间332nm8kg1#
我也有同样的问题。=("@petrovmiroslav,你有什么解决办法吗?
piok6c0g2#
同样的错误!请尽快修复。