javascript - que - Node.js browserify slow: ¿no hay una manera de almacenar en caché grandes bibliotecas?

browserify vs webpack

Question

Estoy creando un archivo que requiere bibliotecas enormes como jquery y three.js usando browserify. El proceso de compilación lleva varios segundos, probablemente porque está recompilando todas las librerías por cada cambio menor que realice. ¿Hay alguna manera de acelerarlo?

Answer 1

El uso de https://github.com/substack/watchify es prácticamente una necesidad, ya que en realidad almacena en caché los deps entre recargas.

Mis compilaciones cayeron de 3-8s a menos de 1s. (Las> 3s compilaciones seguían usando ignoreGlobals , detectGlobals=false , e incluso noParse ing jQuery).

Así es como lo uso con gulp y 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: aquí hay una traducción 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"])

Answer 2

Escribí esto para resolver el problema de las compilaciones lentas con browserify y commonjs-everywhere. Si lo ejecuta en el modo "ver", automáticamente observará sus archivos de entrada y reconstruirá de manera incremental cualquier archivo que haya cambiado. Básicamente instantáneo y nunca se volverá más lento a medida que tu proyecto crezca.

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

Answer 3

Hay algunas opciones que pueden ayudar:

--noparse=FILE es una necesidad para cosas como jQuery y three.js que son enormes pero que no require ningún uso.

--detect-globals Establézcalo en falso si su módulo no usa ningún globode node.js. Indica a browserify que no analice un archivo en busca de process , global , __filename y __dirname .

--insert-globals Establézcalo en verdadero si su módulo utiliza node.js globals. Esto definirá esas variables globales sin analizar el módulo y verificar si se están utilizando.

Pude acelerar mi compilación mediante el uso external ThreeJS, usando noparse con él y configurándolo para que no creara un mapa de origen para él.

Utilice https://github.com/substack/watchify mientras desarrolla.

Answer 4

Si usa grunt, puede usar mi tarea grunt: https://github.com/amiorin/grunt-watchify

Almacena en caché las dependencias y observa el sistema de archivos. Debido a esto la construcción es muy rápida. Puede usarlo con grunt-contrib-watch y grunt-contrib-connect o solo. Puedes encontrar un ejemplo de Gruntfile.js en el repositorio de github.

Si no usa gruñido, puede usar el watchify original de @substack: https://github.com/substack/watchify

Answer 5

¿Ha intentado usar los --insert-globals , --ig o --fast ? (todos son lo mismo)

La razón por la que es lento puede ser que esté escaneando todos los __dirname jquery y d3 en busca de __dirname , __filename , process y global references.

EDITAR:

Acabo de recordar: Browserify tomará las funciones requeridas preexistentes y volverá a usarlas. más información aquí

Esto significa que podría crear un paquete para sus librerías estáticas, y luego solo reconstruir el paquete para el código de su aplicación en el cambio.

Esto, junto con mi respuesta previa a la edición, debería hacerlo mucho más rápido.

Answer 6

Actualizar

También puede intentarlo para persistify que se puede usar como reemplazo para watchify desde la línea de comandos y desde el código.

Respuesta original a continuación

=======

Actualmente estoy usando bundly : https://www.npmjs.com/package/bundly

DISCLOUSO COMPLETO : lo escribí

Pero la principal diferencia de esta envoltura es que proporciona una construcción incremental. Persiste el caché de browserify entre ejecuciones y solo analiza los archivos que han cambiado sin la necesidad del modo de visualización.

Actualmente, el módulo hace un poco más que solo agregar el caché, pero estoy pensando que la lógica que maneja la parte de compilación incremental se puede mover a un complemento, de esa manera se puede usar directamente con browserify.

Compruebe una demostración aquí: https://github.com/royriojas/bundly-usage-demo