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

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

捆绑时自己出现在60K.

B是单独包含的,并假设是全局的,我已经通过在我的构建步骤中执行一个替换的脏点来完成这项工作,并且需要(“B”)使用global.B

C是什么导致了我的问题,它的意思是“只有8K”大小但是当我尝试用A捆绑它时我的捆绑跳跃到600K,因为我认为它依赖于大量的依赖？

这是不可接受的,但我不知道如何让它变得更小,因为我不知道它究竟是什么(或者更重要的是我可以排除使其仍然有用).我可以尝试使用驱逐器的二进制印章,但我不知道这是否是一种安全的方式,甚至是明智的方式来做到这一点.

我怎样才能将C捆绑起来,只让我的捆绑包出现在68.5K(两个代码块总大小为60k 8.5k),当然还可以使用？

我是节点和浏览器的新手,但是我已经在这上面打了一个星期了,所以说我在举手之前给了它一个很好的刺.

如果重要的其他信息：

>它需要运行服务器端和客户端
> B实际上是ReactJS
> C实际上是React Router Component
>通过ReactJS.net使用windows和c#…嘿……等等……回来……风滚草

解决方法

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

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

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'))
})