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 根据多个入口点来打包成多个文件。这些文件所共同依赖的模块会被打包在一个单独的文件中。在使用时，须要先引用包含共同模块的文件，再引用单个入口文件对应的打包以后的文件。插件