如何在React + ReactRouter Web应用程序（由WebPack构建）上仅在需要时拆分css并加载它们

Question

我有一个由Web应用程序构建的Web应用程序，这需要花费大量时间来首次加载。 经过调查 - 我已经尝试了很多改进，也就是在服务器端渲染上只使用关键CSS的改进。 但现在＆＃39; SSR完成后 - React生成了更多的CSS规则 - 此时未使用， 所以我的问题是： 是否可以拆分CSS并按需加载它们（即：路线改变时）？

任何帮助将不胜感激。 提前谢谢！

Answer 1

尝试使用css-modules。

/* style.css */
.className {
  color: green;
}

假设你有上面的样式文件。您可以使用以下代码来应用样式。

import styles from "./style.css";
const ExampleComponent = () => (
  <div className={styles.className}>
    Hello World!
  </div>
);

你应该使用webpack配置来导入CSS文件。

css-modules documentation

Answer 2

动态导入的组件/异步组件react loadable。

Answer 3

我通过使用了惊人的软件包“ react-universal-component”解决了这个问题， 您可以详细了解here和here。 您可以使用css块，也可以使用我的方式- 根据您的组件拆分css文件，然后从组件本身调用它们，而不使用'wholeCss.css'文件或类似的文件。 这样，您可以确定没有加载所需的CSS。