使用create-react-app代码拆分来分离CSS文件,而不会弹出

时间:2019-03-13 15:44:00

标签: css reactjs webpack create-react-app

由于我的应用程序太大,我无法使用react-loadable来进行代码拆分。一切正常,但是CSS嵌入了这些新的JavaScript块中,然后似乎动态地加载到了页面中。我希望每个块中的CSS都位于单独的文件中,而不是放在JS文件本身中。我可以在不退出和修改Webpack配置的情况下完成此操作吗?如果可能的话,我真的很想避免。

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

enter image description here

注意最后一句话:

  

但是,如果您使用代码拆分,则任何异步捆绑包仍将使用   异步代码中的“样式”加载程序,因此来自它们的CSS不会位于   主CSS文件。

2 个答案:

答案 0 :(得分:2)

不相信create-react-app的目的是为您的项目的构建配置提供有用的默认值,并提供一个应用程序项目结构的基本模板。主要思想是,create-react-app可使您专注于构建应用程序,而不必担心设置各种构建配置,例如Webpack用于捆绑资产,babel用于转译JavaScript。代码,整理等... create-react-app是适用于大多数Web应用程序的一种出色的“千篇一律”解决方案,但是由于应用程序规模的增长,它无法解决一些极端情况,例如自定义性能需求。另一个比喻是,它类似于制定或遵循饮食计划:您知道在给定的设定/ rep范围内基本的复合运动以及在满足大量营养素需求的情况下食用健康食品将帮助您达到最佳体质可能....但要做好准备,只有5-10%的个人定制决定了成败机会的可能性。这就是演员/女演员/运动员等都拥有营养师,厨师和力量教练的原因,这些人可以根据个人水平成功地个性化此基本模板。回到问题所在,您需要从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,无论如何都会如此。

希望对您有帮助,祝您好运!如果您想出一个优雅的解决方案,请与他人分享,希望能证明是错误的:)

答案 1 :(得分:1)

我想在这一点上我可以确认这是您用于创建项目的create-react-app版本的问题。 react-loadable并不是问题,它是动态的import()语法,并且在ExtractTextPlugin中缺乏对它的支持,因此无法从该语法中找到代码块。

我使用新的create-react-app在计算机上进行了测试。您会看到捆绑包是在动态加载时创建的。

enter image description here

这里是extract-text-webpack-plugin上该问题的链接。此功能不会添加到此插件中(请参阅最新评论):https://github.com/webpack-contrib/extract-text-webpack-plugin/issues/455

因此,您现在需要做的是找到一种切换到MiniCssExtractPlugin的方法,如果要提取该CSS,我认为这是您目前唯一的选择。

修改:供将来的Google用户使用。 MiniCssExtractPlugin不支持Webpack 3,您需要完全升级到4。