Я создаю файл, который требует огромных библиотек, таких как jquery и three.js, с помощью браузера. Процесс компиляции занимает несколько секунд, возможно, потому, что он перекомпилирует все библиотеки для каждого незначительного изменения, которое я делаю. Есть ли способ ускорить его?
Node.js Browsify slow: нет ли способа кэшировать большие библиотеки?
Ответ 1
Пробовали ли вы использовать флаги --insert-globals
, --ig
или --fast
? (они все одинаковые)
Причиной этого может быть то, что он сканирует все jquery и d3 для ссылок __dirname
, __filename
, process
и global
.
EDIT:
Я только что вспомнил: Browserify будет выполнять любые ранее существовавшие функции require и вернуться к использованию. подробнее здесь
Это означает, что вы можете построить пакет для своих статических библиотек, а затем только перестроить пакет для вашего кода приложения при изменении.
Это в сочетании с моим предварительным ответом, чтобы сделать его намного быстрее.
Ответ 2
Есть несколько вариантов, которые могут помочь:
--noparse=FILE
является обязательным для таких вещей, как jQuery и three.js, которые огромны, но не используют require
вообще.
--detect-globals
Установите значение false, если ваш модуль не использует глобальные переменные node.js. Направляет браузеру не анализировать файл, ищущий process
, global
, __filename
и __dirname
.
--insert-globals
Установите значение true, если ваш модуль использует глобальные переменные node.js. Это определит эти глобальные переменные без разбора модуля и проверки их использования.
Мне удалось ускорить сборку с помощью external
izing ThreeJS, используя noparse
с ней и не создавая для нее исходную карту.
Используйте https://github.com/substack/watchify при разработке.
Ответ 3
Если вы используете grunt, вы можете использовать мою задачу grunt: https://github.com/amiorin/grunt-watchify
Он кэширует зависимости и наблюдает за файловой системой. Из-за этого сборка очень быстрая. Вы можете использовать его с помощью grunt-contrib-watch и grunt-contrib-connect или самостоятельно. Вы можете найти пример Gruntfile.js в репозитории github.
Если вы не используете grunt, вы можете использовать оригинал watchify from @substack: https://github.com/substack/watchify
Ответ 4
Использование watchify является практически обязательным, поскольку оно фактически кэширует ваши отпечатки между перезагрузками.
Мои сборки упали с 3-8 до 1 с. (В сборках > 3s все еще использовались ignoreGlobals
, detectGlobals=false
и даже noParse
ing 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"]
EDIT: здесь перевод 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"])
Ответ 5
Обновление
Вы также можете попробовать persistify, который может быть использован в качестве замены взамен для просмотра из командной строки и из код.
Оригинальный ответ ниже
=======
В настоящее время я использую bundly
: https://www.npmjs.com/package/bundly
ПОЛНОЕ ОТКЛЮЧЕНИЕ: я написал его
Но основное отличие этой оболочки заключается в том, что она обеспечивает инкрементное построение. Он сохраняет кеш browserify
между прогонами и анализирует только те файлы, которые были изменены без необходимости в режиме просмотра.
В настоящее время модуль делает немного больше, чем добавляет кеш, но я думаю, что логика, которая обрабатывает инкрементную часть сборки, может быть перенесена в плагин, таким образом, ее можно использовать с браузером напрямую.
Проверьте демо: https://github.com/royriojas/bundly-usage-demo
Ответ 6
Я написал это, чтобы решить проблему медленных построений с помощью браузера и commonjs-везде. Если вы запустите его в режиме "смотреть", он автоматически просмотрит ваши входные файлы и поэтапно перестроит только любые измененные файлы. В основном мгновенный и никогда не будет замедляться по мере роста вашего проекта.