javascript Node.js browserify 慢：没有办法缓存大库吗？

Node.js browserify slow: isn't there a way to cache big libraries?

提问by MaiaVictor

I'm creating a file that requires huge libraries such as jquery and three.js using browserify. The compiling process takes several seconds, probably because it's recompiling all the libs for each minor change I make. Is there a way to speed it up?

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

采纳答案by coderzach

Have you tried using the --insert-globals, --ig, or --fastflags? (they're all the same thing)

你有没有使用尝试--insert-globals，--ig或--fast标志？（它们都是一样的）

The reason it's slow may be that it's scanning all of jquery and d3 for __dirname, __filename, process, and globalreferences.

它的速度慢的原因可能是因为它的扫描所有jQuery和D3为__dirname，__filename，process，和global引用。

EDIT:

编辑：

I just remembered: Browserify will take any pre-existing require functions and fall back to using that. more info here

我只记得：Browserify 将采用任何预先存在的 require 函数并回退到使用它。更多信息在这里

This means you could build a bundle for your static libs, and then only rebuild the bundle for your app code on change.

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

This coupled with my pre-edit answer should make it a lot faster.

这加上我的预编辑答案应该使它更快。

回答by Trevor Dixon

There are a few options that can help:

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

--noparse=FILEis a must for things like jQuery and three.js that are huge but don't use requireat all.

--noparse=FILE对于像 jQuery 和three.js 之类的东西来说是必须的，它们很大但根本不使用require。

--detect-globalsSet to false if your module doesn't use any node.js globals. Directs browserify not to parse a file looking for process, global, __filename, and __dirname.

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

--insert-globalsSet to true if your module doesuse node.js globals. This will define those globals without parsing the module and checking to see if they're used.

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

I was able to speed up my build by externalizing ThreeJS, using noparsewith it, and setting it not to create a source map for it.

我能够通过external使用 ThreeJS来加速我的构建，使用noparse它，并设置它不为它创建源映射。

Use https://github.com/substack/watchifywhile developing.

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

回答by Alberto Miorin

If you use grunt, you can use my grunt task : https://github.com/amiorin/grunt-watchify

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

It caches the dependencies and watches the filesystem. Because of this the build is very fast. You can use it with grunt-contrib-watch and grunt-contrib-connect or alone. You can find a Gruntfile.js example in the github repository.

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

If you don't use grunt, you can use the original watchify from @substack : https://github.com/substack/watchify

如果你不使用 grunt，你可以使用来自 @substack 的原始 watchify ：https: //github.com/substack/watchify

回答by rattray

Using watchifyis practically a must, as it actually caches your deps between reloads.

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

My builds dropped from 3-8s to under 1s. (The >3s builds were still using ignoreGlobals, detectGlobals=false, and even noParseing jQuery).

我的构建从 3-8 秒下降到 1 秒以下。（>3s 构建仍然使用ignoreGlobals、detectGlobals=false，甚至noParseing jQuery）。

Here's how I use it with gulp and coffeescript:

这是我如何将它与 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"]

EDIT: here's a JS translation:

编辑：这是一个 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"])

回答by roy riojas

Update

更新

You can also give it a try to persistifywhich can be used as a drop in replacement for watchify from the command line and from code.

您还可以尝试持久化，它可以用作从命令行和代码中替代 watchify。

Original answer below

原答案如下

=======

========

I'm currently using bundly: https://www.npmjs.com/package/bundly

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

FULL DISCLOUSURE: I wrote it

完全披露：我写的

But the main difference of this wrapper is that it provides incremental building. It persists the browserifycache between runs and only parse the files that have changed without the need for the watch mode.

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

Currently the module does a bit more than only adding the cache, but I'm thinking that the logic that handles the incremental build part could be moved to a plugin, that way it can be used with browserify directly.

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

Check a demo here: https://github.com/royriojas/bundly-usage-demo

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

回答by Kris Nye

I wrote this to solve the problem of slow builds with browserify and commonjs-everywhere. If you run it in "watch" mode then it will automatically watch your input files and incrementally rebuild just any files that changed. Basically instantaneous and will never get slower as your project grows.

我写这个是为了解决使用 browserify 和 commonjs-everywhere 构建缓慢的问题。如果您在“监视”模式下运行它，那么它会自动监视您的输入文件并增量重建任何更改的文件。基本上是即时的，并且不会随着项目的增长而变慢。

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

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