Node.js browserify慢:没有办法来caching大型图书馆?

我正在创build一个文件,需要巨大的库,如jQuery和three.js使用browserify。 编译过程需要几秒钟,可能是因为它正在重新编译我所做的每个小改动的所有库。 有没有办法加快速度?

你有没有尝试过使用--insert-globals ,– --ig--fast标志? (他们都是一样的东西)

它的速度慢的原因可能是它正在扫描jquery和d3的所有__dirname__filenameprocessglobal引用。

编辑:

我只记得:Browserify将采取任何预先存在的要求function,并回落到使用。 更多信息在这里

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

这与我的编辑前答案应该使它快很多。

有几个选项可以帮助:

--noparse=FILE对于像jQuery和three.js这样庞大但不需要require的东西是必须的。

--detect-globals如果你的模块没有使用任何node.js全局--detect-globals设置为false。 指示browserify不要parsing查找processglobal__filename__dirname

--insert-globals如果您的模块使用node.js全局--insert-globals设置为true。 这将定义这些全局variables而不parsing模块并检查是否被使用。

我可以通过external ThreeJS来加速构build,使用noparse ,并且不要为它创build一个源图。

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

如果你使用咕噜声,你可以使用我的咕task任务: https : //github.com/amiorin/grunt-watchify

它caching依赖关系并监视文件系统。 正因为如此,构build速度非常快。 你可以用grunt-contrib-watch和grunt-contrib-connect或单独使用它。 你可以在github仓库中find一个Gruntfile.js例子。

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

使用watchify实际上是必须的,因为它实际上是在重新加载之间caching你的代码。

我的构build从3-8下降到1下。 (> 3s构build仍然使用ignoreGlobalsdetectGlobals=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"]) 

更新

你也可以试试persistify哪些可以用来替代watchify从命令行和代码。

下面的原始答案

=======

我目前正在使用bundly : https : bundly

完整的不清楚 :我写了

但是这个包装的主要区别在于它提供了增量构build。 它在运行之间保持browserifycaching,只parsing已经改变的文件,而不需要手表模式。

目前该模块做的不仅仅是添加caching,但是我认为处理增量构build部分的逻辑可以被移动到一个插件,这样它可以直接用于browserify。

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

我写这个是为了解决浏览器和常用浏览器到处都是缓慢的问题。 如果你在“观看”模式下运行它,那么它将自动观看你的input文件,并逐步重build任何改变的文件。 基本上是瞬间的,随着项目的增长,决不会变慢。

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