gulp browserify捆綁時間太長

我遇到了一個奇怪的問題，需要您的幫助來確定發生了什麼。gulp browserify捆綁時間太長

我已經配置了gulp來構建我的測試，寫在React.js ES6中。我已經使用browserify來設置CommonJS env和babelify以獲得更大的ES6支持。並且一切正常，但如果需要太長的時間（在我看來）來構建，作爲CommonJS模塊需要React。這意味着

import React from 'react';

線將提高束/從1.2secs編譯的時候周圍4secs初始構建，然後當檢測到任何更改大約需要2.5secs重建js文件。當包含更多模塊時，這個時間會迅速增加。我的工作是配置bower在瀏覽器中公開任何外部庫作爲全局庫，不喜歡這個解決方案。

這裏是我的主要browserify設置：

function buildApp() { 
    return browserify({ 
    entries: config.paths.jsx, 
    extensions: ['.jsx'], 
    debug: true 
    }) 
    .bundle() 
    .on('error', onError) 
    .pipe(source('app.js')) 
    .pipe(gulp.dest(config.paths.dest)); 
}

和變換通過packages.json

"browserify": { 
    "transform": [ 
    "babelify" 
    ] 
}

加到我也嘗試了ignore選項在我BUILDAPPfunction如下：

transform(babelify.configure({ 
    ignore: /node_modules/ 
})

但這並沒有幫助。

我使用的是最新的軟件包，因爲據我所知，這意味着：

"babelify": "^6.3.0", 
"browserify": "^11.2.0", 
"react": "^0.14.0"

在節點V4.1.0。任何人有任何想法？無論如何，請分享。

P.S. Here是回購的鏈接，如果有人有時間並想仔細觀察。或者，也許，測試構建時間。

來源

2015-10-12 radical_edo

這是因爲去做出反應，並要求一對夫婦的事情，這意味着你的browserify有多個節點遍歷。

你可能能夠改善這種情況的一種方法是預先捆綁React。但是，這隻會改進React庫，添加另一個庫，並且它會再次變慢。您可以使用

有一兩件事要提高rebundling是加入watchify您browserify捆綁過程。

試試這個

var watchify = require('watchify'); 
var babelify = require('babelify'); 

var bundler; 

function buildApp() { 
    bundler = bundler || watchify(browserify({ 
    entries: config.paths.jsx, 
    extensions: ['.jsx'], 
    debug: true, 
    transform: [babelify], //This will allow you to use babel for jsx/es6 
    cache: {}, // required for watchify 
    packageCache: {}, // required for watchify 
    fullPaths: true //You can change this false in production 
    })) 

    return bundler 
    .bundle() 
    .on('error', onError) 
    .pipe(source('app.js')) 
    .pipe(gulp.dest(config.paths.dest)); 
}

你需要做的是包裝你browserify在watchify，並添加一些額外的屬性（緩存，packageCache，fullPaths）

Watchify會加快您的rebundling本質是什麼通過緩存捆綁文件進行處理。

！重要提示

記得在製作中刪除watchify，除非你是構建過程將掛起，因爲它在看你的文件。

來源

2015-10-12 05:33:28

我已經添加了'與所需的選項watchify'，沒有工作，rebundling過程中保持不變。 –

您是否添加了緩存，packageCache和fullPaths？ –

的確，我已經傳遞給'browserify'的選項對象。 –

-1

請對我的回購https://github.com/skrobek/react-gulp-browserify看看。我正在使用完全相同的技術堆棧：吞噬，瀏覽，反應。

來源

2015-10-12 06:14:17 Pawel

我已經看了一下你的配置，據我所看到的不同是你連接了'update'事件，試過了，但它對我沒有多大幫助 –

gulp browserify捆綁時間太長

回答

相關問題