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

Question

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

捆绑时自己出现在60K.

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

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

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

我怎么可以捆绑至最高,只有我已经在捆绑68.5K(代码60K + 8.5K两个区块的总规模)出来,当然还可以使用？

我是新来的节点,并browserify但我一直在敲打这一个多星期,以便公平地说,我已经给它一个很好的刺把我的手之前.

如果重要的其他信息:

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

Answer 1

如果您创建一个包含所有应用程序依赖项(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'))
})