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

hedzr 發布于2019-08-19 18:07 / 1087人閱讀

摘要：使用官方的插件是個比較有效的提高速度方案。另外在這個任務中須要先執行一次實例的方法，但這次打包的速度和直接執行是一樣的。然后在用戶改動某個關聯的文件時，都會自動觸發任務可以看出，這次打包只花費了毫秒，速度提高了很多。

使用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中隱藏

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/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