我可以關閉 create-react-app 分塊機制嗎？

Question

我正在使用create-react-app設置我的 React 應用程序項目。

我想知道是否有辦法關閉內置在 react 腳本中的分塊機制。 問題是我需要修復在構建中創建的包的名稱。

Answer 1

我發現您可以通過設置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 2

這可以通過使用react-app-rewired 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 = function override(config, env) {
        config.output = {
            ...config.output, // copy all settings
            filename: "static/js/[name].js",
            chunkFilename: "static/js/[name].chunk.js",
        };
        return config;
    };

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

除非您要更改更多配置，否則僅在build使用react-app-rewired就足夠了。 否則在其他腳本中用react-app-rewired替換react-scripts ，除了eject

Answer 3

這是 Darko 答案的擴展和改進版本。 我創建它主要是為了為那些對本評論中提到的解決方案不完全滿意並且沒有耐心挖掘以更好的方式解決問題的評論的其他人節省時間。

這種“hacky”方法的主要思想是webpack重寫標准react-scripts的webpack配置並將其注入到原始腳本中。

對於您需要安裝rewire從包npmjs.org ，就像這樣：

npm install rewire --save-dev

然后你創建單獨的構建腳本，它將“包裝”原始的webpack 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;

然后，我們應該在我們的packages.json使用這個構建腳本而不是標准腳本，如下所示：

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

Answer 4

我不知道如何關閉分塊，但你可以嘗試做些什么來實現你的目標

更新到最新的 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 5

有一個不需要彈出的黑客：

1. yarn add --dev rewire

2. 在 root 中創建文件並將其命名為build-non-split.js

3. 用下面的代碼填充它：

    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;

4. 將package.json的構建腳本更改為：

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

5. yarn build

Answer 6

正如其他人指出的那樣，您可以使用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;
};