Node.js browserify慢:没有办法来caching大型图书馆?
我正在创build一个文件,需要巨大的库,如jQuery和three.js使用browserify。 编译过程需要几秒钟,可能是因为它正在重新编译我所做的每个小改动的所有库。 有没有办法加快速度?
你有没有尝试过使用--insert-globals
,– --ig
或--fast
标志? (他们都是一样的东西)
它的速度慢的原因可能是它正在扫描jquery和d3的所有__dirname
, __filename
, process
和global
引用。
编辑:
我只记得:Browserify将采取任何预先存在的要求function,并回落到使用。 更多信息在这里
这意味着您可以为您的静态库构build一个包,然后仅在更改时重新构build您的应用程序代码包。
这与我的编辑前答案应该使它快很多。
有几个选项可以帮助:
--noparse=FILE
对于像jQuery和three.js这样庞大但不需要require的东西是必须的。
--detect-globals
如果你的模块没有使用任何node.js全局--detect-globals
设置为false。 指示browserify不要parsing查找process
, global
, __filename
和__dirname
。
--insert-globals
如果您的模块使用node.js全局--insert-globals
设置为true。 这将定义这些全局variables而不parsing模块并检查是否被使用。
我可以通过external
ThreeJS来加速构build,使用noparse
,并且不要为它创build一个源图。
如果你使用咕噜声,你可以使用我的咕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仍然使用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"])
更新
你也可以试试persistify哪些可以用来替代watchify从命令行和代码。
下面的原始答案
=======
我目前正在使用bundly
: https : bundly
完整的不清楚 :我写了
但是这个包装的主要区别在于它提供了增量构build。 它在运行之间保持browserify
caching,只parsing已经改变的文件,而不需要手表模式。
目前该模块做的不仅仅是添加caching,但是我认为处理增量构build部分的逻辑可以被移动到一个插件,这样它可以直接用于browserify。
在这里检查一个演示: https : //github.com/royriojas/bundly-usage-demo
我写这个是为了解决浏览器和常用浏览器到处都是缓慢的问题。 如果你在“观看”模式下运行它,那么它将自动观看你的input文件,并逐步重build任何改变的文件。 基本上是瞬间的,随着项目的增长,决不会变慢。