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

Question

我正在使用create-react-app.

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

Answer 1

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

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

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

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

Answer 2

正如其他人指出的那样，您可以尝试使用react-app-rewired而不是弹出。这是一个还可以处理 css 和媒体文件的版本：

安装后npm install react-app-rewired --save-dev我创建了一个config-overrides.js包含以下内容的：

module.exports = function override(config, env) {
    if (env !== "production") {
        return config;
    }

    // Get rid of hash for js files
    config.output.filename = "static/js/[name].js"
    config.output.chunkFilename = "static/js/[name].chunk.js"

    // Get rid of hash for css files
    const miniCssExtractPlugin = config.plugins.find(element => element.constructor.name === "MiniCssExtractPlugin");
    miniCssExtractPlugin.options.filename = "static/css/[name].css"
    miniCssExtractPlugin.options.chunkFilename = "static/css/[name].css"

    // Get rid of hash for media files
    config.module.rules[1].oneOf.forEach(oneOf => {
        if (!oneOf.options ||  oneOf.options.name !== "static/media/[name].[hash:8].[ext]") {
            return;
        }
        oneOf.options.name = "static/media/[name].[ext]"
    });

    return config;
};

Answer 3

这是达科答案的扩展和改进版本。我创建它主要是为了为其他对此评论中提到的解决方案不完全满意并且没有耐心挖掘此评论的人节省时间更好的方式解决问题的

\n

这种“hacky”方法的主要思想是重写标准react-scripts的webpack这种“hacky”方法的主要思想是动态

\n

为此，您需要rewire从安装包npmjs.org，如下所示：

\n

npm install rewire --save-dev\n

\n

然后，您创建单独的构建脚本，该脚本将“包装”原始react build脚本并确保它将减轻正确的webpack配置。传统的方法是将该文件保存在./scripts文件夹中。所以我们称它为./scripts/build.js。其内容：

\n

npm install rewire --save-dev\n

\n

然后，我们应该使用这个构建脚本而不是我们的标准脚本packages.json，如下所示：

\n

...\n  "scripts": {\n    "start": "react-scripts start",\n    "build": "node ./scripts/build.js",\n    "test": "react-scripts test",\n    "eject": "react-scripts eject"\n  },\n...\n

\n

Answer 4

这可以通过使用react-app-rewired包扩展您的 CRA 来完成，该包允许您修改 webpack 配置。

删除构建文件名中的哈希所需的更改。

1. 安装 react-app-rewired

npm install react-app-rewired --save-dev

2. config-overrides.js在根文件夹中创建文件（在哪里package.json）

3. 将以下代码放入config-overrides.js文件中。它保留所有 CRA 设置，仅从文件名中删除哈希部分。

    module.exports = 函数覆盖（配置，环境）{
        config.output = {
            ...config.output, // 复制所有设置
            文件名：“静态/js/[名称].js”，
            chunkFilename: "static/js/[name].chunk.js",
        };
        返回配置；
    };

4. 使用新配置。在部分中的package.json文件中scripts替换"build": "react-scripts build",为"build": "react-app-rewired build",

除非您要更改更多配置，否则仅react-app-rewired在build. 否则在其他脚本中替换react-scripts为react-app-rewired除了eject

Answer 5

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

更新到最新的react和react-dom，运行“yarnreact@nextreact-dom@next”（或npm命令执行相同操作）

您现在应该拥有最新的 React 版本 - 这样您就可以使用 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