使用Browserify在頁面間共享公共代碼

Question

我有一個相當大的多頁JavaScript應用程序，它使用requirejs來組織代碼。我正在研究轉向browserify，因爲我喜歡它提供的簡單性，而且我已經習慣了node.js模塊系統。

目前每個網頁上我的JavaScript是這樣

<script data-main="/scripts/config/common" src="/scripts/lib/require.js"> 
<script data-main="/scripts/config/page-specific-js" src="/scripts/lib/require.js"> 

和我有共同構建步驟，併爲每個頁面的生成。通過這種方式，大部分JS都緩存在每個頁面上。

是否有可能通過browserify做類似的事情？這樣緩存是否值得呢，還是將所有頁面中的所有內容都捆綁到一個文件中（考慮到可能只有一個頁面可能依賴於大型外部庫）會更好？

Answer 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入口點使用的所有文件都會被分解成捆/ common.js，而所有的特定頁面的代碼將被定位於特定於頁面的軟件包文件。現在，在每個頁面上，您可以爲通用包添加腳本標記，爲頁面特定的包添加腳本標記。例如，/一，你可以把：

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

如果你不想使用命令行版本，你也可以用因子束from the 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'));