web-dev-qa-db-ja.com

Node.js browserify slow：大きなライブラリをキャッシュする方法はありませんか？

Browserifyを使用して、jqueryやthree.jsなどの巨大なライブラリを必要とするファイルを作成しています。コンパイルプロセスには数秒かかります。これは、マイナーな変更ごとにすべてのライブラリを再コンパイルしているためと考えられます。それをスピードアップする方法はありますか？

javascriptnode.jsbrowserify
26
MaiaVictor

--insert-globals、--ig、または--fastフラグを使用してみましたか？ （それらはすべて同じものです）

遅いのは、jQueryとd3のすべてをスキャンして、__dirname、__filename、process、globalの参照を検索しているためです。

編集：

私はちょうど思い出しました：Browserifyは既存のrequire関数を受け取り、それを使用するようにフォールバックします。 詳細はこちら

これは、静的ライブラリのバンドルをビルドし、変更時にアプリコードのバンドルのみを再ビルドできることを意味します。

これと私の編集前の回答を組み合わせると、はるかに速くなります。

21
coderzach

役立ついくつかのオプションがあります。

--noparse=FILEは、jQueryやthree.jsのように巨大ですが、requireをまったく使用しないものには必須です。

--detect-globalsモジュールがnode.jsグローバルを使用しない場合はfalseに設定します。 process、global、__filename、および__dirnameを探すファイルを解析しないようにbrowserifyに指示します。

--insert-globalsモジュールがdoesでnode.jsグローバルを使用する場合はtrueに設定します。これにより、モジュールを解析したり、それらが使用されているかどうかを確認したりせずに、これらのグローバルが定義されます。

ThreeJSをexternalizingし、noparseを使用して、ソースマップを作成しないように設定することで、ビルドを高速化できました。

開発中に https://github.com/substack/watchify を使用します。

13
Trevor Dixon

Gruntを使用する場合は、私のgruntタスクを使用できます： https://github.com/amiorin/grunt-watchify

依存関係をキャッシュし、ファイルシステムを監視します。このため、ビルドは非常に高速です。 grunt-contrib-watchおよびgrunt-contrib-connectとともに、または単独で使用できます。 Gruntfile.jsの例はgithubリポジトリにあります。

Gruntを使用しない場合は、@ substackの元のwatchifyを使用できます。 https://github.com/substack/watchify

6
Alberto Miorin

watchify を使用することは、リロードの間に実際にdepをキャッシュするため、実際には必須です。

私のビルドは3-8秒から1秒未満に落ちました。 （> 3sビルドはまだignoreGlobals、detectGlobals=false、さらにはnoParseing 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"])
5
rattray

更新

コマンドラインとコードからwatchifyの代わりにドロップとして使用できる persistify を試すこともできます。

以下の元の答え

=======

現在、bundlyを使用しています： https://www.npmjs.com/package/bundly

完全な開示：私が書いた

ただし、このラッパーの主な違いは、増分ラッパーを提供することです。実行間でbrowserifyキャッシュを永続化し、監視モードを必要とせずに変更されたファイルのみを解析します。

現在、モジュールはキャッシュを追加するだけではありませんが、インクリメンタルビルドパーツを処理するロジックをプラグインに移動して、browserifyで直接使用できると考えています。

ここでデモを確認してください： https://github.com/royriojas/bundly-usage-demo

4
roy riojas

私はbrowserifyとcommonjs-everywhereでの遅いビルドの問題を解決するためにこれを書きました。 「監視」モードで実行すると、入力ファイルが自動的に監視され、変更されたファイルだけが増分的に再構築されます。基本的に瞬間的で、プロジェクトの成長に伴って遅くなることはありません。

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

2
Kris Nye