gulp批量打包文件並提取公共文件

時間 2019-11-13

原文原文鏈接

gulp是前端開發過程當中對代碼進行構建的工具，是自動化項目的構建利器。前端

browseriyf是模塊化打包工具。gulp

通常狀況下，Browserify 會把全部的模塊打包成單個文件。單個文件在大多數狀況下是適用的，能夠減小 HTTP 請求數量，提升性能。不過在其餘一些狀況下，打包的單個文件可能過大，使得頁面的初始加載時間過長。這主要是由於單個文件中包含了所有的模塊，其中的某些模塊使用得不多，或是在頁面初始加載的時候不須要，能夠在須要的時候再加載。這個時候能夠用 Browserify 的插件來建立不一樣的打包文件。模塊化

最近項目研究到這個問題，配置的東西記錄下，以備翻查。工具

下面的配置能夠批量提取文件進行打包公共文件。性能

var pages = [];
function bundle(){
    globby(['src/js/**/*.js', '!src/js/**/*.min.js', '!src/js/lib/*.js', '!src/js/frontObj.js',
                 '!src/js/langConfig.js', '!src/js/rconfig.js', '!src/js/test/**/*.js']).then(function(entries){
        pages = entries;
        var b =  browserify(pages);
    var outputs = pages.map(function(page) { return page.replace("src","dist") });
    
     b.plugin('factor-bundle',{outputs: outputs});
    
     return b.bundle()
      //.pipe(fs.createWriteStream('dist/js/common.js'))
      .pipe(source("common.js")) 
//      .pipe(buffer())
//      .pipe(rename({ suffix: '.min' }))
//      .pipe(uglify())
//      .pipe(sourcemaps.init({loadMaps: true})) 
//      .pipe(sourcemaps.write("."))
      .pipe(gulp.dest("dist/js/"));
    });
    console.log(pages);
     
}
gulp.task("browserify", bundle);

用到插件 "factor-bundle",插件做用處理重複模塊spa

factor-bundle 根據多個入口點來打包成多個文件。這些文件所共同依賴的模塊會被打包在一個單獨的文件中。在使用時，須要先引用包含共同模塊的文件，再引用單個入口文件對應的打包以後的文件。插件