Подтвердить что ты не робот

Node.js Browsify slow: нет ли способа кэшировать большие библиотеки?

Я создаю файл, который требует огромных библиотек, таких как jquery и three.js, с помощью браузера. Процесс компиляции занимает несколько секунд, возможно, потому, что он перекомпилирует все библиотеки для каждого незначительного изменения, которое я делаю. Есть ли способ ускорить его?

4b9b3361

Ответ 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-везде. Если вы запустите его в режиме "смотреть", он автоматически просмотрит ваши входные файлы и поэтапно перестроит только любые измененные файлы. В основном мгновенный и никогда не будет замедляться по мере роста вашего проекта.

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