Node.js browserify缓慢：难道没有一种缓存大型库的方法吗？

Question

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

- MaiaVictor

---

我怎样才能看到应用程序的细微变化？ - MaiaVictor

在vim中按R编译程序，结果将出现在chrome浏览器中，然后重复此步骤。这应该是瞬间完成的，而不是需要5到10秒钟。 - MaiaVictor

Answer 1

你尝试过使用 --insert-globals, --ig, 或者 --fast 标志吗？（它们其实都是同一个东西）

之所以很慢可能是因为它正在扫描整个jquery和d3，寻找__dirname、__filename、process和global的引用。

编辑:

我刚想起来: Browserify 将采用任何现有的 require 函数，如果找不到就会回退使用它。 在这里了解更多信息

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

结合我的修改前的回答，这将使它快得多。

- coderzach

---

这就是我所做的（为静态库打包），对我而言它很好用。 - MaiaVictor

Answer 2

有几个选项可以帮助:

--noparse=FILE 对于像jQuery和three.js这样的庞大库，但根本不使用require的库来说是必须的。

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

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

我通过将ThreeJS外部化、使用noparse和将其设置为不创建源映射来加速构建。

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

- Trevor Dixon

---

哦，非常酷，谢谢。你能举个完整的命令的例子吗？比如，只需添加--noparse=jquery，那么所有名为jquery的文件的要求都不会被解析？ - MaiaVictor

我正在使用browserify-middleware，所以我不知道命令行调用的确切方式是什么。这是我正在做的事情：https://gist.github.com/trevordixon/5747010 - Trevor Dixon

@Viclib 嘿，你有没有找到使用 --noparse 的示例？ - Carpetfizz

我已经退出了Node.js，所以我记不起来了。抱歉。 - MaiaVictor

Answer 3

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

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

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

- Alberto Miorin

Answer 4

使用watchify几乎是必须的，因为它可以在重新加载之间缓存依赖项。

我的构建时间从3-8秒降至不到1秒。（使用ignoreGlobals，detectGlobals=false甚至noParseing jQuery的构建仍需> 3秒）。

以下是我使用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"])

- rattray

---

这个第一次是可以工作的。 但是当我对 CoffeeScript 进行任何更改时，它会返回解析缓存的 JS 文件并抛出以下错误：ParseError: 保留字 "var" - hackerone

嗯，我不知道该告诉你什么；上面的脚本已经在我这里运行了一段时间，包括第一次之后。也许你正在尝试对JavaScript文件运行“coffee”转换？ - rattray

你能否提供一个 JavaScript 的答案，而不是 CoffeeScript，因为问题有 javascript 标签。 - mikemaccana

Answer 5

更新

您还可以尝试使用Persistify，它可以作为命令行和代码的 watchify 替代品。

以下是原始答案:

=======

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

完全透明：我写了这个包装器

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

当前该模块做得更多，不仅添加缓存，但我想处理增量构建部分的逻辑可以移动到插件中，这样它就可以与 browserify 直接一起使用。

这里有一个演示: https://github.com/royriojas/bundly-usage-demo

- roy riojas

---

我刚刚安装了 Persistify，它正是我一直想要的。大大减少了我的初始启动时间，从 15 秒缩短到了 2 秒。在我的 Gulp 构建中，用它替代 Browserify 和 Watchify 非常容易，而且一次就成功了。我测试了几个案例，一切都如预期般工作。真是提神醒脑！谢谢 Roy！ - Randy

Answer 6

我写了这个解决Browserify和CommonJS-everywhere在构建时的缓慢问题。如果以“监视”模式运行，它将自动监视您的输入文件并逐步重建任何更改的文件。基本上是瞬间完成，随着项目的增长绝不会变慢。 https://github.com/krisnye/browser-build

- Kris Nye