亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專(zhuān)欄INFORMATION COLUMN

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

hedzr / 1132人閱讀

摘要：使用官方的插件是個(gè)比較有效的提高速度方案。另外在這個(gè)任務(wù)中須要先執(zhí)行一次實(shí)例的方法，但這次打包的速度和直接執(zhí)行是一樣的。然后在用戶(hù)改動(dòng)某個(gè)關(guān)聯(lián)的文件時(shí)，都會(huì)自動(dòng)觸發(fā)任務(wù)可以看出，這次打包只花費(fèi)了毫秒，速度提高了很多。

使用Browserify打包js時(shí)如果項(xiàng)目變得越來(lái)越大，編譯時(shí)間就會(huì)相應(yīng)變得越來(lái)越長(zhǎng)。使用官方的插件watchify是個(gè)比較有效的提高速度方案。

提速原理

watchify的用法和gulp的watch方法比較類(lèi)似，都是監(jiān)控文件的改動(dòng)來(lái)觸發(fā)一些操作。在gulp中我們可以把一個(gè)完整的任務(wù)拆分成很多個(gè)局部任務(wù)，然后使用gulp.watch對(duì)這些局部任務(wù)進(jìn)行監(jiān)聽(tīng)，例如：

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"]);
//});

如上例所示，在監(jiān)測(cè)不同局部位置的js文件發(fā)生改動(dòng)后，則只會(huì)自動(dòng)執(zhí)行相應(yīng)的build-js1或build-js2等局部任務(wù)；而如果直接監(jiān)測(cè)所有的js文件，就必須每次執(zhí)行build-all-js任務(wù)了。

watchify的提速原理和這個(gè)思路有點(diǎn)類(lèi)似，它可以監(jiān)測(cè)個(gè)別文件的改動(dòng)，從而觸發(fā)只將需要更新的文件打包。它須要先執(zhí)行一次完整的打包，首次打包的速度和正常速度是一樣的；然后每次用戶(hù)改變某個(gè)和browserify關(guān)聯(lián)的js文件時(shí)，會(huì)自動(dòng)執(zhí)行打包，而這次打包的速度卻非?？?。

具體實(shí)例

watchify結(jié)合gulp的實(shí)例如下：

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(...);

//執(zhí)行打包js
function bundle() {
  var jsLibName = getJsLibName();

  return b.bundle()
    .pipe(source(jsLibName))
    .pipe(buffer())
    .pipe(gulp.dest("./dist/js").on("end", function() {  //打包js后繼續(xù)進(jìn)行一些后續(xù)操作
      gulp.src(["./vendor/babelHelpers.js", "./dist/js/" + jsLibName])
      .pipe(concat(jsLibName))
      .pipe(gulpif(argv.min, uglify()))
      .pipe(gulp.dest("./dist/js"))
    }));
}

//定義打包js任務(wù)
gulp.task("build-all-js", bundle);

//啟動(dòng)watchify監(jiān)測(cè)文件改動(dòng)
gulp.task("watch-js", function() {
  b.plugin(watchify);  //設(shè)置watchify插件
  b.on("update", function(ids) {  //監(jiān)測(cè)文件改動(dòng)
    ids.forEach(function(v) {
      console.log("bundle changed file:" + v);  //記錄改動(dòng)的文件名
    });

    gulp.start("build-all-js");  //觸發(fā)打包js任務(wù)
  });

  return bundle();  //須要先執(zhí)行一次bundle
});

例中可以在gulpfile.js中將browserify的實(shí)例定義在全局，這樣在browserify實(shí)例的update事件中就可以正常調(diào)用到bundle方法了。

定義通常的打包js任務(wù)build-all-js，例如需要整個(gè)項(xiàng)目打包執(zhí)行它即可。

多帶帶定義監(jiān)測(cè)文件改動(dòng)的任務(wù)watch-js，使用gulp啟動(dòng)這個(gè)任務(wù)后，就可以啟動(dòng)watchify的文件改動(dòng)監(jiān)測(cè)功能了。需要為browserify實(shí)例注冊(cè)u(píng)pdate事件，在該事件中觸發(fā)build-all-js任務(wù)即可。另外在這個(gè)任務(wù)中須要先執(zhí)行一次browserify實(shí)例的bundle方法，但這次打包的速度和直接執(zhí)行build-all-js是一樣的。

關(guān)于watchify的更多細(xì)節(jié)大家可以參考官方文檔及這篇文章：Fast browserify builds with watchify
測(cè)試打包速度

首先在啟動(dòng)watch-js任務(wù)時(shí)，會(huì)執(zhí)行首次打包：

本次打包共花費(fèi)了6.2秒。

然后在用戶(hù)改動(dòng)某個(gè)browserify關(guān)聯(lián)的js文件時(shí)，都會(huì)自動(dòng)觸發(fā)build-all-js任務(wù)：

可以看出，這次打包只花費(fèi)了203毫秒，速度提高了很多。

更多細(xì)節(jié)大家可參考實(shí)例的源代碼。

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://www.ezyhdfw.cn/yun/79212.html

相關(guān)文章

  • 基于 Gulp + Browserify 構(gòu)建 ES6 環(huán)境下的自動(dòng)化前端項(xiàng)目

    摘要：本文特此給大家介紹下如何使用配合來(lái)構(gòu)建基于的前端項(xiàng)目。最后，在目錄下會(huì)生成最終的項(xiàng)目文件。執(zhí)行單元測(cè)試本例中使用進(jìn)行單元測(cè)試。 隨著React、Angular2、Redux等前沿的前端框架越來(lái)越流行，使用webpack、gulp等工具構(gòu)建前端自動(dòng)化項(xiàng)目也隨之變得越來(lái)越重要。鑒于目前業(yè)界普遍更流行使用webpack來(lái)構(gòu)建es6(ECMAScript 2015)前端項(xiàng)目，網(wǎng)上的相關(guān)教程也比...

    yuanxin 評(píng)論0 收藏0

  • [Laya游戲開(kāi)發(fā)]小技巧使Laya構(gòu)建速度提高10倍

    摘要：為何選擇引擎微信小游戲推出之后，很多公司也相應(yīng)的進(jìn)入到微信小游戲這個(gè)領(lǐng)域，現(xiàn)在市場(chǎng)上的游戲開(kāi)發(fā)引擎，如都對(duì)小游戲有了很好的兼容性。 1. 為何選擇Laya引擎 微信小游戲推出之后，很多公司也相應(yīng)的進(jìn)入到微信小游戲這個(gè)領(lǐng)域，現(xiàn)在市場(chǎng)上的游戲開(kāi)發(fā)引擎，如Cocos、Egret、Laya都對(duì)小游戲有了很好的兼容性。目前公司技術(shù)棧主要是使用Cocos和Laya，經(jīng)過(guò)幾個(gè)項(xiàng)目的接觸，考量了引擎在...

    Harpsichord1207 評(píng)論0 收藏0

  • 我他喵的到底要怎樣才能在生產(chǎn)環(huán)境中用上 ES6 模塊化？

    摘要：因此，你還是需要各種各樣雜七雜八的工具來(lái)轉(zhuǎn)換你的代碼噢，我可去你媽的吧，這些東西都是干嘛的我就是想用個(gè)模塊化，我到底該用啥子本文正旨在列出幾種可用的在生產(chǎn)環(huán)境中放心使用模塊化的方法，希望能幫到諸位后來(lái)者這方面的中文資源實(shí)在是忒少了。 原文發(fā)表在我的博客上。最近搗鼓了一下 ES6 的模塊化，分享一些經(jīng)驗(yàn) :) Python3 已經(jīng)發(fā)布了九年了，Python 社區(qū)卻還在用 Python 2...

    KaltZK 評(píng)論0 收藏0

  • webpack 3 零基礎(chǔ)入門(mén)教程 #1 - 介紹

    摘要：所以它在某些程度上，跟的功能有些相同。嚴(yán)格上講，模塊化不是他強(qiáng)調(diào)的東西，他旨在規(guī)范前端開(kāi)發(fā)流程。更是明顯強(qiáng)調(diào)模塊化開(kāi)發(fā)，而那些文件壓縮合并預(yù)處理等功能，不過(guò)是他附帶的功能。 1. webpack 是什么? showImg(https://segmentfault.com/img/remote/1460000012293461); 先來(lái)說(shuō)一下 webpack 是什么。 webpack 的...

    張紅新 評(píng)論0 收藏0

  • Javascript模塊化及webpack基本介紹

    摘要：可維護(hù)性根據(jù)定義，每個(gè)模塊都是獨(dú)立的。良好設(shè)計(jì)的模塊會(huì)盡量與外部的代碼撇清關(guān)系，以便于獨(dú)立對(duì)其進(jìn)行改進(jìn)和維護(hù)。這標(biāo)志模塊化編程正式誕生。的模塊系統(tǒng)，就是參照規(guī)范實(shí)現(xiàn)的。對(duì)象就代表模塊本身。 javascript模塊化及webpack基本介紹 JavaScript 模塊化發(fā)展歷程 什么是模塊化 ? 為什么要做Javascript模塊化? JavaScript 模塊化發(fā)展歷程 什么是模...

    figofuture 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

hedzr

男|高級(jí)講師

TA的文章

閱讀更多
最新活動(dòng)
閱讀需要支付1元查看
<