1

我们有一个小型 ReactJS 应用程序，需要在我们企业的多个不同站点之间共享。这是一个全局导航栏。我们的一些应用程序是 HTML、ASP.Net，甚至是经典的 ASP。我们的方法是简单地允许团队引用我们的 JS 脚本并在页面上抛出一个 div 并让它运行。

我已经开始使用带有 craco 的 create-react-app 来使我们的输出尽可能简单。例如，我们从 JS 文件中删除了哈希名称，因为我们不希望所有团队都必须在每次构建时更新他们的引用。我们正在 S3/Cloudfront 中管理缓存清除。

是否有最佳实践让 React App 输出

build
  - globalnav.js
  - globalnav.css

为了性能起见，每个文件 1 或 2 个文件就可以了，尽管这些文件一开始就非常小。

我接近了

const path = require('path');

module.exports = {
  webpack: {
    configure: {
      optimization: {
        runtimeChunk: false,
        splitChunks: {
          cacheGroups: {
            default: false,
            commons: {
              test: /[\\/]node_modules[\\/]/,
              name: 'vendors',
              filename: 'globalnav-vendors.js',
            }
          }
        }
      },
      output: {
        filename: 'globalnav-main.js',
        path: path.resolve(__dirname, 'build')
      }
    }
  }
}

CSS 文件仍然存在，/build/static/css/vendors.hash.chunk.css所以我mv在构建后使用了一个丑陋的命令将其移动到/build/globalnav.css. 但现在我缺少图标字体。

4

0 回答 0