我正在创建一个需要使用 browserify 的大型库（例如 jquery 和 three.js）的文件。编译过程需要几秒钟，可能是因为它正在为我所做的每个小改动重新编译所有库。有没有办法加快速度？
问问题
18329 次
6 回答
22
您是否尝试过使用--insert-globals、--ig或--fast标志？（它们都是一样的）
它缓慢的原因可能是它正在扫描所有 jquery 和 d3 以查找__dirname、__filename、process和global引用。
编辑：
我只记得：Browserify 将采用任何预先存在的 require 函数并回退到使用它。更多信息在这里
这意味着您可以为您的静态库构建一个包，然后仅在更改时为您的应用程序代码重新构建包。
再加上我的预编辑答案应该会更快。
于 2013-04-30T01:59:58.103 回答
13
有几个选项可以提供帮助：
--noparse=FILE对于像 jQuery 和 three.js 这样巨大但根本不使用的东西来说是必须的require。
--detect-globals如果您的模块不使用任何 node.js 全局变量，则设置为 false。指示 browserify 不解析文件以查找process、global、__filename和__dirname.
--insert-globals如果您的模块确实使用 node.js 全局变量，则设置为 true。这将在不解析模块并检查它们是否被使用的情况下定义这些全局变量。
我能够通过对externalThreeJS 进行优化、使用noparse它并将其设置为不为其创建源映射来加快构建速度。
于 2013-06-09T01:27:18.600 回答
6
如果你使用 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
于 2013-06-17T19:56:30.067 回答
5
使用watchify实际上是必须的，因为它实际上会在重新加载之间缓存您的 deps。
我的构建从 3-8 秒下降到 1 秒以下。（>3s 的构建仍然使用ignoreGlobals, detectGlobals=false, 甚至noParsejQuery）。
以下是我如何将它与 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"])
于 2014-09-29T05:42:57.997 回答
4
更新
您还可以尝试将其持久化，它可以用作命令行和代码中 watchify 的替代品。
原答案如下
=======
我目前正在使用bundly：https ://www.npmjs.com/package/bundly
完整披露：我写的
但是这个包装器的主要区别在于它提供了增量构建。它browserify在运行之间保留缓存，并且只解析已更改的文件，而不需要监视模式。
目前该模块所做的不仅仅是添加缓存，但我认为处理增量构建部分的逻辑可以移动到插件中，这样它就可以直接与 browserify 一起使用。
于 2015-07-20T10:02:00.133 回答
2
我写这篇文章是为了解决 browserify 和 commonjs-everywhere 构建缓慢的问题。如果您在“监视”模式下运行它，那么它将自动监视您的输入文件并增量重建任何更改的文件。基本上是即时的，并且永远不会随着项目的增长而变慢。
于 2013-05-12T19:25:26.203 回答