Question

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

我想知道是否有一种方法可以关闭React脚本中内置的分块机制。问题是我需要修复在构建中创建的捆绑软件的名称。

Answer 1

这是Darko答案的扩展和改进版本。我创建它的主要目的是为那些对this comment中提到的解决方案不完全满意并且又没有耐心钻研this comment并以更好的方式解决问题的人节省时间。

这种“ hacky”方法的主要思想是即时重写标准requireContext().bindService()的{{1}}配置，并将其注入原始脚本。

为此，您需要从react-scripts安装webpack软件包，如下所示：

rewire

然后，您将创建单独的构建脚本，该脚本将“包装”原始的npmjs.org脚本，并确保它会减轻已更正的npm install rewire --save-dev的配置。常规方法是将此文件保存在react build文件夹中。因此，我们将其称为webpack。内容：

./scripts

然后，我们应该使用此构建脚本而不是./scripts/build.js中的标准脚本，如下所示：

const rewire = require('rewire');
const path = require('path');

// Pointing to file which we want to re-wire — this is original build script
const defaults = rewire('react-scripts/scripts/build.js');

// Getting configuration from original build script
let config = defaults.__get__('config');

// If we want to move build result into a different folder, we can do that!
// Please note: that should be an absolute path!
config.output.path = path.join(path.dirname(__dirname), 'custom/target/folder');

// If we want to rename resulting bundle file to not have hashes, we can do that!
config.output.filename = 'custom-bundle-name.js';

// And the last thing: disabling splitting
config.optimization.splitChunks = {
    cacheGroups: {
        default: false,
    },
};
config.optimization.runtimeChunk = false;

Answer 2

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

更改以删除构建文件名中的哈希值。

安装react-app-rewired

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

在您的根文件夹（config-overrides.js在其中）中创建package.json文件
将以下代码放置到config-overrides.js文件中。它保留所有CRA设置，仅从文件名中删除哈希部分。

    module.exports = function override(config, env) {
        config.output = {
            ...config.output, // copy all settings
            filename: "static/js/[name].js",
            chunkFilename: "static/js/[name].chunk.js",
        };
        return config;
    };

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

除非您要更改更多配置，否则仅在react-app-rewired中使用build就足够了。否则在react-scripts

以外的其他脚本中将react-app-rewired替换为eject

Answer 3

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

更新到最新的react和react-dom，运行'yarn react @ next react-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

Answer 4

我发现您可以通过设置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'

Answer 5

不需要eject就可以破解：

yarn add --dev rewire
在 root 中创建文件并将其命名为 build-non-split.js

用下面的代码填充它：

const rewire = require('rewire');
const defaults = rewire('react-scripts/scripts/build.js');
let config = defaults.__get__('config');

config.optimization.splitChunks = {
    cacheGroups: {
        default: false,
    },
};

config.optimization.runtimeChunk = false;

将 package.json 中的构建脚本更改为：

"build": "node ./scripts/build-non-split.js",

yarn build

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

5 个答案: