Обмен общим кодом между страницами с помощью Browserify

У меня довольно большое многостраничное javascript-приложение, которое использует requirejs для организации кода. Я исследую переход к браузеру, потому что мне нравится простота, которую он предлагает, и я уже привык к системе модуля node.js.

В настоящее время на каждой странице есть javascript, который выглядит следующим образом

и у меня есть общий шаг сборки и сборка для каждой страницы. Таким образом, большинство JS кэшируется для каждой страницы.

Можно ли сделать что-то подобное с помощью браузера? Является ли кэширование таким, даже если оно стоит, или лучше всего связать все в один файл на всех страницах (учитывая, что, возможно, только одна страница может зависеть от большой внешней библиотеки)?

Ответы

Ответ 1

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

Предположим, что у вас есть 3 страницы, /a, /b и /c. Каждая страница соответствует файлу точки входа /browser/a.js, /browser.b.js и /browser/c.js. С фактором-связкой вы можете:

browserify -p [ factor-bundle -o bundle/a.js -o bundle/b.js -o bundle/c.js ] \
  browser/a.js browser/b.js browser/c.js > bundle/common.js

любые файлы, используемые более чем 1 из точек входа, будут учтены в bundle/common.js, тогда как весь код для конкретной страницы будет размещен в файле пакета для конкретной страницы. Теперь на каждой странице вы можете поместить тег script для общего пакета и тег script для пакета для конкретной страницы. Например, для /a вы можете поставить:

<script src="bundle/common.js"></script>
<script src="bundle/a.js"></script>

Если вы не хотите использовать версию командной строки, вы также можете использовать factor-bundle из API:

var browserify = require('browserify');
var fs = require('fs');

var files = [ './files/a.js', './files/b.js', './files/c.js' ];
var b = browserify(files);
b.plugin('factor-bundle', {
    outputs: [ 'bundle/a.js', 'bundle/b.js', 'bundle/c.js' ]
});
b.bundle().pipe(fs.createWriteStream('bundle/common.js'));