css - 使用 create-react-app code-splitting 分离 CSS 文件而不弹出

Question

我正在使用 react-loadable 来利用代码拆分，因为我的应用程序变得太大而无法执行此操作。这一切正常，但 CSS 嵌入到这些新的 JavaScript block 中，然后看似动态地加载到页面中。我希望这些 block 中的每一个的 CSS 位于单独的文件中，而不是在 JS 文件本身中。我可以在不自行弹出和修改 Webpack 配置的情况下完成此操作吗？如果可能的话，我真的很想避免这种情况。

编辑:我刚刚弹出以查看实际的 Webpack 配置在做什么。以下评论证实了我遇到的问题，但没有提供解决方案:

注意最后一句话:

If you use code splitting, however, any async bundles will still use the "style" loader inside the async code so CSS from them won't be in the main CSS file.

Answer 1

我不相信，create-react-app的目的|是为您为元素的构建配置提供有用的默认值，并为您的应用程序的元素结构提供基本模板。主要思想是create-react-app将允许您专注于构建您的应用程序，而不是担心设置各种构建配置，例如 Webpack用于捆绑 Assets ，babel用于转译 JavaScript 代码、linting 等...create-react-app对于大多数 Web 应用程序来说，这是一个很棒的“千篇一律”解决方案，但它不会解决边缘情况，例如由于应用程序规模增长而需要自定义性能。另一个类比是，它有点类似于锻炼或遵循饮食计划:你知道基本的复合运动，在给定的组/重复范围内，以及在你的常量营养素需求范围内吃健康的食物，将帮助你达到最佳体质可能....但要做好舞台准备，只有 5-10% 的个人定制会影响或破坏您获胜的机会。这就是为什么 Actor /女 Actor /运动员/等等.. 都有营养师、厨师和力量教练来个性化这个基本模板，以在每个人的层面上取得成功。回到你的问题，从它的声音你需要修改你的 MiniCssExtractPlugin webpack.config.js 中的插件设置分块你的 CSS适本地放入单独的文件中。也许您可以尝试以下操作:

1. 在版本控制系统(例如 Github、Bitbucket 等)上备份您的源代码...因为您肯定会在这个试错过程中搞砸。然后从 master 分支出来，以免破坏您的主分支与工作应用程序。

现在您有两个可以尝试的选项:

1. 您所有的构建配置设置都在您的 webpack.config.js 中，即使您使用 create-react-app .由于此 配置仅封装在 react-scripts 中节点模块。所以也许你可以尝试直接编辑这个文件，而不弹出:<base_path>/node_modules/react-scripts/config/webpack.config.js尽管您需要小心不要破坏现有的配置设置。至少这样，如果你毁了这个文件，你总是可以删除并重新安装 react-scripts并返回到您的初始配置。这也将允许您在“半安全”沙盒环境中使用您的自定义项。
2. 拉起你的大男孩裤然后弹出!虽然这不是您最想听到的...您有定制需求，由于规模，大多数人永远不需要考虑，所以这需要定制配置。类似于我之前给出的运动/饮食计划类比。如果有任何可取之处，请记住，没有魔法 create-react-app提供 而只是为您的构建配置提供有用的默认值。通过弹出，您仍然可以像以前一样使用该应用程序，但现在您可以自己前进，如果您没有使用 create-react-app无论如何都会是这样。

希望对你有所帮助，祝你好运!如果您找到一个优雅的解决方案，请与他人分享，我希望被证明是错误的:)