reactjs - 在使用第三方东西时如何保持 Browserify 包大小合理(如果重要的话通过 grunt )

Question

我正在尝试捆绑我自己的代码 (A)，它又使用 2 个第三方组件(B 和 C)，其中 C 也需要 B。据我所知，所有内容都是使用 CommonJS 节点样式模块编写的。

捆绑后单独使用 A 的价格为 60K。

B 是单独包含的，并假定是全局的，我通过在构建步骤中进行一些肮脏的替换，将 require("B") 替换为 global.B，使此工作正常。

C 是导致我出现问题的原因，它的大小本来应该是“只有 8K”，但是当我尝试将它与 A 捆绑在一起时，我的 bundle 会跳到 600K+，因为我认为它会带来大量的依赖项？

这是 Not Acceptable ，但我不知道如何让它变得更小，因为我不知道它到底会带来什么(或者更重要的是我可以排除什么以使其仍然有效)。我可以尝试使用排除项进行二进制切割，但我不知道这是否是一种安全的方法，甚至是明智的方法。

我怎样才能捆绑 C 并只让我的 bundle 大小为 68.5K(两个代码块的总大小 60k + 8.5k)并且当然仍然可以工作？

我是 Node 和 browserify 的新手，但我已经在这个问题上苦苦钻研了一个多星期了，所以公平地说，在举手之前我已经对其进行了很好的尝试。

其他重要信息:

• 它需要运行服务器端和客户端
• B 实际上是 ReactJS
• C 实际上是 React Router 组件
• 通过 ReactJS.net 使用 Windows 和 C#...嘿...等等...回来...风滚草

Answer 1

如果您创建一个包含应用程序的所有依赖项 (B + C) 的外部 bundle ，并在捆绑应用程序自己的代码 (A) 时将这些模块声明为外部模块，那么事情应该按您的预期进行。

我不知道用于执行此操作的 grunt-browserify 配置咒语，但以下内容显示了如何在一些示例 gulp 任务中直接使用 browserify，因此 bundle 创建应该是可重用的:

var browserify = require('browserify')
var gulp = require('gulp')
var source = require('vinyl-source-stream')

gulp.task('js-deps', function() {
  var b = browserify()
  b.require('react')
  b.require('react-router-component')
  b.transform('envify')

  return b.bundle()
    .pipe(source('deps.js'))
    .pipe(gulp.dest('./build'))
})

gulp.task('bundle-js', function() {
  var b = browserify('./lib/app.js')
  b.external('react')
  b.external('react-router-component')

  return b.bundle()
    .pipe(source('app.js'))
    .pipe(gulp.dest('./build'))
})