如何在Gulp中提高Browserify的打包速度

hedzr 发布于2019-08-19 18:07 / 1069人阅读

摘要：使用官方的插件是个比较有效的提高速度方案。另外在这个任务中须要先执行一次实例的方法，但这次打包的速度和直接执行是一样的。然后在用户改动某个关联的文件时，都会自动触发任务可以看出，这次打包只花费了毫秒，速度提高了很多。

使用Browserify打包js时如果项目变得越来越大，编译时间就会相应变得越来越长。使用官方的插件watchify是个比较有效的提高速度方案。

提速原理

watchify的用法和gulp的watch方法比较类似，都是监控文件的改动来触发一些操作。在gulp中我们可以把一个完整的任务拆分成很多个局部任务，然后使用gulp.watch对这些局部任务进行监听，例如：

gulp.task("build-js1", ...);
gulp.task("build-js2", ...);
gulp.task("build-all-js", ["build-js1", "build-js2"]);

gulp.task("watch-js1", function () {
  gulp.watch("./src/models/**/*.js", ["build-js1"]);
});

gulp.task("watch-js2", function () {
  gulp.watch("./src/views/**/*.js", ["build-js2"]);
});

//gulp.task("watch-js", function () {
//  gulp.watch("./src/**/*.js", ["build-all-js"]);
//});

如上例所示，在监测不同局部位置的js文件发生改动后，则只会自动执行相应的build-js1或build-js2等局部任务；而如果直接监测所有的js文件，就必须每次执行build-all-js任务了。

watchify的提速原理和这个思路有点类似，它可以监测个别文件的改动，从而触发只将需要更新的文件打包。它须要先执行一次完整的打包，首次打包的速度和正常速度是一样的；然后每次用户改变某个和browserify关联的js文件时，会自动执行打包，而这次打包的速度却非常快。

具体实例

watchify结合gulp的实例如下：

var gulp = require("gulp"),
  browserify = require("browserify"),
  source = require("vinyl-source-stream"),
  buffer = require("vinyl-buffer"),
  watchify = require("watchify"),
  concat = require("gulp-concat"),
  gulpif = require("gulp-if"),
  argv = require("yargs").argv,
  ...;

function getJsLibName() {
  ...
}

//初始化browserify
var b = browserify({
  entries: "./src/base.js"
})
.plugin(...)
.transform(...);

//执行打包js
function bundle() {
  var jsLibName = getJsLibName();

  return b.bundle()
    .pipe(source(jsLibName))
    .pipe(buffer())
    .pipe(gulp.dest("./dist/js").on("end", function() {  //打包js后继续进行一些后续操作
      gulp.src(["./vendor/babelHelpers.js", "./dist/js/" + jsLibName])
      .pipe(concat(jsLibName))
      .pipe(gulpif(argv.min, uglify()))
      .pipe(gulp.dest("./dist/js"))
    }));
}

//定义打包js任务
gulp.task("build-all-js", bundle);

//启动watchify监测文件改动
gulp.task("watch-js", function() {
  b.plugin(watchify);  //设置watchify插件
  b.on("update", function(ids) {  //监测文件改动
    ids.forEach(function(v) {
      console.log("bundle changed file:" + v);  //记录改动的文件名
    });

    gulp.start("build-all-js");  //触发打包js任务
  });

  return bundle();  //须要先执行一次bundle
});

例中可以在gulpfile.js中将browserify的实例定义在全局，这样在browserify实例的update事件中就可以正常调用到bundle方法了。

定义通常的打包js任务build-all-js，例如需要整个项目打包执行它即可。

多带带定义监测文件改动的任务watch-js，使用gulp启动这个任务后，就可以启动watchify的文件改动监测功能了。需要为browserify实例注册update事件，在该事件中触发build-all-js任务即可。另外在这个任务中须要先执行一次browserify实例的bundle方法，但这次打包的速度和直接执行build-all-js是一样的。

关于watchify的更多细节大家可以参考官方文档及这篇文章：Fast browserify builds with watchify

测试打包速度

首先在启动watch-js任务时，会执行首次打包：

本次打包共花费了6.2秒。

然后在用户改动某个browserify关联的js文件时，都会自动触发build-all-js任务：

可以看出，这次打包只花费了203毫秒，速度提高了很多。

更多细节大家可参考实例的源代码。

云服务器 GPU云服务器如何提高PHP速度 c4d中如何提高oc渲染时间速度提高如何在js中隐藏

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/79212.html

基于 Gulp + Browserify 构建 ES6 环境下的自动化前端项目

摘要：本文特此给大家介绍下如何使用配合来构建基于的前端项目。最后，在目录下会生成最终的项目文件。执行单元测试本例中使用进行单元测试。随着React、Angular2、Redux等前沿的前端框架越来越流行，使用webpack、gulp等工具构建前端自动化项目也随之变得越来越重要。鉴于目前业界普遍更流行使用webpack来构建es6(ECMAScript 2015)前端项目，网上的相关教程也比...

yuanxin 2019-08-19 18:05 评论0 收藏0
[Laya游戏开发]小技巧使Laya构建速度提高10倍

摘要：为何选择引擎微信小游戏推出之后，很多公司也相应的进入到微信小游戏这个领域，现在市场上的游戏开发引擎，如都对小游戏有了很好的兼容性。 1. 为何选择Laya引擎微信小游戏推出之后，很多公司也相应的进入到微信小游戏这个领域，现在市场上的游戏开发引擎，如Cocos、Egret、Laya都对小游戏有了很好的兼容性。目前公司技术栈主要是使用Cocos和Laya，经过几个项目的接触，考量了引擎在...

Harpsichord1207 2019-08-26 10:18 评论0 收藏0
我他喵的到底要怎样才能在生产环境中用上 ES6 模块化？

摘要：因此，你还是需要各种各样杂七杂八的工具来转换你的代码噢，我可去你妈的吧，这些东西都是干嘛的我就是想用个模块化，我到底该用啥子本文正旨在列出几种可用的在生产环境中放心使用模块化的方法，希望能帮到诸位后来者这方面的中文资源实在是忒少了。原文发表在我的博客上。最近捣鼓了一下 ES6 的模块化，分享一些经验 :) Python3 已经发布了九年了，Python 社区却还在用 Python 2...

KaltZK 2019-08-20 17:47 评论0 收藏0
webpack 3 零基础入门教程 #1 - 介绍

摘要：所以它在某些程度上，跟的功能有些相同。严格上讲，模块化不是他强调的东西，他旨在规范前端开发流程。更是明显强调模块化开发，而那些文件压缩合并预处理等功能，不过是他附带的功能。 1. webpack 是什么? showImg(https://segmentfault.com/img/remote/1460000012293461); 先来说一下 webpack 是什么。 webpack 的...

张红新 2019-08-21 17:55 评论0 收藏0
Javascript模块化及webpack基本介绍

摘要：可维护性根据定义，每个模块都是独立的。良好设计的模块会尽量与外部的代码撇清关系，以便于独立对其进行改进和维护。这标志模块化编程正式诞生。的模块系统，就是参照规范实现的。对象就代表模块本身。 javascript模块化及webpack基本介绍 JavaScript 模块化发展历程什么是模块化 ? 为什么要做Javascript模块化? JavaScript 模块化发展历程什么是模...

figofuture 2019-08-21 18:00 评论0 收藏0