使用 CRACO 禁用文件分块

Gue*_*lla 5 reactjs create-react-app craco

我想弄清楚如何使用 CRACO ( https://github.com/gsoft-inc/craco ) 来禁用创建反应应用程序中的文件分块。

我创建了以下 craco.config.js:

// craco.config.js
module.exports = {
  output: {
    fileName: 'static/js/bundle.js',
  },
}
Run Code Online (Sandbox Code Playgroud)

但它没有任何效果。使用 CRACO 在 CRA 中禁用文件分块的配置应该是什么样的?

OAr*_*son 12

编辑:要完全禁用分块,我相信这可以做到。
来源:https ://github.com/facebook/create-react-app/issues/5306#issuecomment-650737697

// craco.config.js
module.exports = {
  webpack: {
    configure: {
      optimization: {
        runtimeChunk: false,
        splitChunks: {
          chunks(chunk) {
            return false
          },
        },
      },
    },
  },
}
Run Code Online (Sandbox Code Playgroud)

原文:也许会有所帮助?

module.exports = {
  webpack: {
    configure: {
      output: {
        filename: 'static/js/bundle.js',
      },
      optimization: {
        runtimeChunk: false,
        splitChunks: {
          chunks: 'all',
          cacheGroups: {
            default: false,
            vendors: false,
            // vendor chunk
          },
        },
      },
    },
  },
  plugins: [
    {
      plugin: require('craco-plugin-scoped-css'),
    },
  ],
}
Run Code Online (Sandbox Code Playgroud)

  • 谢谢,编辑仍然给出了一个块文件,但阅读链接的 github 线程得到的答案是该文件是由 reportWebVitals 创建的。注释掉会产生一个捆绑文件 (3认同)