Как сохранить разумный размер пакета Browserify при использовании требований для сторонних материалов (через grunt, если это имеет значение)

Если вы создадите внешний пакет, содержащий все зависимости вашего приложения (B + C), и объявите эти модули внешними при объединении собственного кода вашего приложения (A), все должно работать так, как вы ожидаете.

Я не знаю заклинаний конфигурации grunt-browserify для этого, но ниже показано, как вы будете использовать browserify напрямую в некоторых примерах gulp-задач, поэтому создание пакета должно быть многоразовым:

var browserify = require('browserify')
var gulp = require('gulp')
var source = require('vinyl-source-stream')

gulp.task('js-deps', function() {
  var b = browserify()
  b.require('react')
  b.require('react-router-component')
  b.transform('envify')

  return b.bundle()
    .pipe(source('deps.js'))
    .pipe(gulp.dest('./build'))
})

gulp.task('bundle-js', function() {
  var b = browserify('./lib/app.js')
  b.external('react')
  b.external('react-router-component')

  return b.bundle()
    .pipe(source('app.js'))
    .pipe(gulp.dest('./build'))
})

Кто-то уже упомянул внешний вариант, который должен быть фактическим решением. А теперь примите во внимание и эти советы. Возможно, вы уже знаете большую часть, если не все, но кое-что может помочь. Это не превратит файл размером 600 КБ в 1 КБ, но, тем не менее, может иметь большое значение.

Начните с проверки дополнительных параметров в https://github.com/substack/node-browserify#usage и, в частности, параметр --no-bundle-external. Если внешняя опция работает с require('b'), но по-прежнему включает внешние библиотеки, это ваш лучший выбор;

Также посмотрите на параметры глобальных переменных. Когда я начинал с browserify, у меня была одна функция, скомпилированная в огромную библиотеку, поскольку она содержала все заглушки для нативных модулей NodeJS. Вышеупомянутые варианты были ключевыми в решении этого вопроса. Это было в задаче Grunt, но, если я правильно помню, это не было в задаче grunt-browserify, это все еще может быть актуально.

Установите среду сборки перед запуском browserify:app, если вы еще этого не сделали. Существуют библиотеки, которые зависят от этих переменных для своей производственной компиляции (я думаю, что React — одна из них).

    grunt.loadNpmTasks('grunt-env');

    // initConfig task
    env: {
      dist: {
        NODE_ENV : 'production',
      },
      dev: {
        NODE_ENV: 'development',
      } 
    }

    grunt.registerTask("build_dist", ['env:dist', 'browserify:app']

Попробуйте запустить Uglify именно с этими параметрами;

    // initConfig task options
    options: {
      compress:{
        dead_code     : true,  // discard unreachable code
        drop_debugger : true,  // discard “debugger” statements
        global_defs   : {      // global definitions
          "DEBUG": false,      // matters for some libraries
        },
      }
    }

Вы можете оптимизировать намного больше, но это должно помочь вам начать.

B включен отдельно и считается глобальным, у меня это работает отлично, выполнив грязную замену на моем этапе сборки, которая заменяет require("B") на global.B.

Если вы переключаетесь на global.B после компиляции, ваш пакет также будет иметь все зависимости require('b'). Этот хак (вероятно) лучше:

• Перейдите на страницу https://github.com/jmreidy/grunt-browserify.
• CTRL+F "переназначить"
• Реализуйте это, чтобы оно указывало на b-singleton.js

• Содержимое b-singleton.js:

  module.exports = window.B;
  

Это неприемлемо, но я не знаю, как сделать его еще меньше, поскольку я не знаю, какого черта он тянет (или, что более важно, что я могу исключить, чтобы он все еще работал)

Загляните внутрь исходного кода сгенерированной библиотеки, вы сможете идентифицировать различные модули и их пути к файлам.

Я собрал рабочий пример того, как разделить код на несколько пакетов с помощью Browserify: https://github.com/aldendaniels/browserify-bundle-splitting

При таком подходе вы можете загрузить весь свой код поставщика через Browserify (глобальное шиммирование не требуется), но при этом иметь свой собственный код, связанный отдельно.

Поскольку сгенерированные пакеты действительно независимы, вы можете легко задать разные настройки для сгенерированных пакетов. Например, вы можете отключить исходные карты для стороннего кода, но использовать исходные карты для своего собственного кода.

Вы можете увидеть, какие файлы занимают место в пакете, выполнив эту команду: browserify --list test/browser/browserify-test-uncompiled.js | xargs ls -la | sort