Repository: create-react-app
Issue: Add splitChunks optimization
Labels: issue: proposal,needs triage

### Is your proposal related to a problem?

<!--
  Provide a clear and concise description of what the problem is.
  For example, "I'm always frustrated when..."
-->

Using route-based code splitting causes css duplicate in chunks.

Steps to reproduce:
1. Create simple app with create-react-app
2. Use react-router-dom for client side routing
3. Add one common component with local css.
4. Add 2 pages, using the common component with style overwriting
5. Run build command
6. Check static folder

```
// /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>
);
```

**You get css chunks with duplicates and unexpected styles overwrites in production:**

```
// /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
}
```

https://user-images.githubusercontent.com/46135319/198833216-da796d3f-72b5-4f1c-8927-ac6c2ef8e38e.mov


[Demo page](https://petrovmiroslav.github.io/css-code-splitting-issue)
1. Click to some page link
2. Go back to home page

[Repo](https://github.com/petrovmiroslav/css-code-splitting-issue)


### Describe the solution you'd like

<!--
  Provide a clear and concise description of what you want to happen.
-->

Add splitChunks optimization to webpack.config.js. 
For example:

```
module.exports = function (webpackEnv) {
  // ...
  return {
    // ...
    optimization: {
      // ...
      splitChunks: {
        cacheGroups: {
          commons: {
            name: "common",
            type: "css/mini-extract",
            chunks: "all",
            minChunks: 2,
            enforce: true,
            usedExports: true,
          },
        },
      },
    },
  };
};
```