我可以关闭create-react-app分块机制吗？

Question

我正在使用create-react-app设置我的React应用程序项目。

我想知道是否有办法关闭内置到反应脚本中的分块机制。问题是我需要修复在构建中创建的包的名称。

Answer 1

我不知道如何关闭分块，但你可以尝试实现你的目标

更新到最新反应和反应，运行'yarn react @ next react-dom @ next'（或npm命令执行相同操作）

您现在应该拥有最新的反应版本 - 因此您可以使用React.lazy / React.Suspense进行代码拆分，使用挂钩等。

所以现在你可以使用（下面的组件或依赖示例）命名你的块

 const MyComp = lazy(() =>   import(/* webpackChunkName: 'MyChunkNmame'
*/ './MyComp'), );

const myLib= await import(/* webpackChunkName: "myLib" */ 'myLib');

如果您在使用导入语法时遇到错误问题，则需要使用babel-plugin-syntax-dynamic-import插件。将“babel”字段放在包json中。

现在你可以命名你的块并实现最新的代码拆分方式 - 希望有所帮助。这是一个链接到React.lazy React.Suspense - https://reactjs.org/blog/2018/10/23/react-v-16-6.html

Answer 2

我发现你可以通过设置splitChunks webpack配置来禁用分块。有关更多详细信息，请查看https://github.com/facebook/create-react-app/issues/5306#issuecomment-431431877

但是，这不会从包名称中删除contenthash部分，您仍然会在名称中包含该随机字符串。

要删除它，请转到webpack.config并编辑包名称

'static/js/[name].[contenthash:8].js' => 'static/js/[name].js'