Question

我正在使用browserify创建一个需要大型库（如jquery和three.js）的文件。编译过程需要几秒钟，可能是因为它重新编译了我所做的每个小改动的所有库。有没有办法加快速度？

Answer 1

您是否尝试过使用--insert-globals，--ig或--fast标志？（他们都是一样的）

它缓慢的原因可能是它正在扫描__dirname，__filename，process和global引用的所有jquery和d3。

编辑：

我记得：Browserify将采用任何预先存在的需求函数并回退使用它。 more info here

这意味着您可以为静态库构建一个包，然后仅在更改时为您的应用代码重建包。

这与我的预编辑答案相结合应该会让它快得多。

Answer 2

有几个选项可以提供帮助：

--noparse=FILE是jQuery和three.js之类的必需品，它们很大但根本不使用require。

--detect-globals如果您的模块不使用任何node.js全局变量，则设置为false。指示browserify不解析查找process，global，__filename和__dirname的文件。

--insert-globals如果模块使用node.js全局变量，则设置为true。这将定义那些全局变量而不解析模块并检查它们是否被使用。

我能够通过external使用noparse使用{{1}}来加速我的构建，并将其设置为不为其创建源地图。

开发时使用https://github.com/substack/watchify。

Answer 3

如果你使用grunt，你可以使用我的grunt任务：https://github.com/amiorin/grunt-watchify

它缓存依赖项并监视文件系统。因此，构建速度非常快。您可以将它与grunt-contrib-watch和grunt-contrib-connect一起使用或单独使用。您可以在github存储库中找到Gruntfile.js示例。

如果您不使用grunt，可以使用@substack中的原始密码：https://github.com/substack/watchify

Answer 4

使用watchify几乎是必须的，因为它实际上会在重新加载之间缓存你的deps。

我的版本从3-8秒降到1秒以下。（＆gt; 3s版本仍在使用ignoreGlobals，detectGlobals=false，甚至是noParse jQuery）。

这是我如何使用gulp和coffeescript：

gutil = require("gulp-util")
source = require("vinyl-source-stream")
watchify = require("watchify")
browserify = require("browserify")
coffeeify = require("coffeeify")

gulp.task "watchify", ->
  args = watchify.args
  args.extensions = ['.coffee']
  bundler = watchify(browserify("./coffee/app.coffee", args), args)
  bundler.transform(coffeeify)

  rebundle = ->
    gutil.log gutil.colors.green 'rebundling...'
    bundler.bundle()
      # log errors if they happen
      .on "error", gutil.log.bind(gutil, "Browserify Error")
      # I'm not really sure what this line is all about?
      .pipe source("app.js")
      .pipe gulp.dest("js")
      .pipe livereload()
    gutil.log gutil.colors.green 'rebundled.'

  bundler.on "update", rebundle
  rebundle()

gulp.task "default", ["watchify", "serve"]

编辑：这是一个JS翻译：

var gutil = require("gulp-util")
var source = require("vinyl-source-stream")
var watchify = require("watchify")
var browserify = require("browserify")
var coffeeify = require("coffeeify")

gulp.task("watchify", function() {
  var args = watchify.args
  args.extensions = ['.coffee']
  var bundler = watchify(browserify("./coffee/app.coffee", args), args)
  bundler.transform(coffeeify)

  function rebundle() {
    gutil.log(gutil.colors.green('rebundling...'))
    bundler.bundle()
      // log errors if they happen
      .on("error", gutil.log.bind(gutil, "Browserify Error"))
      // I'm not really sure what this line is all about?
      .pipe(source("app.js"))
      .pipe(gulp.dest("js"))
      .pipe(livereload())
    gutil.log(gutil.colors.green('rebundled.'))
  }

  bundler.on("update", rebundle)
  rebundle()
})

gulp.task("default", ["watchify", "serve"])

Answer 5

<强>更新

你也可以尝试persistify，它可以用来代替命令行和代码中的watchify。

下面的原始答案

=======

我目前正在使用bundly：https://www.npmjs.com/package/bundly

完全拒绝：我写了

但是这个包装器的主要区别在于它提供了增量构建。它在运行之间保持browserify缓存，并且只解析已更改的文件而无需监视模式。

目前该模块不仅仅是添加缓存，而且我认为处理增量构建部分的逻辑可以移动到插件，这样它就可以直接与browserify一起使用。

在此处查看演示：https://github.com/royriojas/bundly-usage-demo

Answer 6

我写这篇文章是为了解决使用browserify和commonjs无处不在的慢速构建问题。如果您在“监视”模式下运行它，它将自动监视您的输入文件并逐步重建任何更改的文件。基本上是即时的，随着项目的增长，永远不会变慢。

https://github.com/krisnye/browser-build

Node.js browserify慢：是不是有办法缓存大型库？

6 个答案: