reactjs 我可以关闭创建-React-应用分块机制吗?

dldeef67  于 2023-02-22  发布在  React
关注(0)|答案(6)|浏览(161)

我正在使用create-react-app设置React应用程序项目。
我想知道是否有办法关闭react脚本中内置的分块机制,问题是我需要修改构建时创建的bundle的名称。

thtygnil

thtygnil1#

这可以通过使用react-app-rewired包扩展您的CRA来完成,该包允许您修改webpack配置。
移除生成文件名中的哈希所需的更改。
1.安装react-app-rewired
npm install react-app-rewired --save-dev
1.创建config-overrides.js文件在你的根文件夹(其中package.json是)
1.将以下代码放入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;
    };

1.使用新配置。在scripts部分的package.json文件中,将"build": "react-scripts build",替换为"build": "react-app-rewired build",
除非您要更改更多配置,否则只需在build中使用react-app-rewired即可,否则请在除eject之外的其他脚本中将react-scripts替换为react-app-rewired

mtb9vblg

mtb9vblg2#

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

2nbm6dog

2nbm6dog3#

这是Darko的答案的扩展和改进版本。我创建它主要是为了保存时间,为其他人谁是不完全满意的解决方案中提到的评论,并没有耐心挖掘到这个评论,解决了这个问题,在更好的方式。
这种“hacky”方法的主要思想是动态重写标准react-scriptswebpack配置,并将其注入到原始脚本中。
为此,您需要从npmjs.org安装rewire包,如下所示:

npm install rewire --save-dev

然后创建单独的构建脚本,该脚本将“ Package ”原始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"
  },
...
chy5wohz

chy5wohz4#

正如其他人指出的,你可以用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;
};
polhcujo

polhcujo5#

我不知道如何关闭分块,但你可以做些什么来实现你的目标
更新为最新的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. lazyReact. Suspence-https://reactjs.org/blog/2018/10/23/react-v-16-6.html的链接

qnyhuwrf

qnyhuwrf6#

有一种无需 * 弹出 * 的黑客攻击:

  1. yarn add --dev rewire
    1.在根目录下创建文件并将其命名为build-non-split.js
    1.填写以下代码:
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;

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

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

相关问题