gulp Browser время связывания занимает слишком много времени

Question

Я столкнулся с странной проблемой и нуждаюсь в вашей помощи, чтобы понять, что происходит.

Я настроил gulp, чтобы построить мой тест, написанный в React.js в ES6. Я использовал browserify для настройки CommonJS env и babelify для большей поддержки ES6. И все работает, это займет слишком много времени (по-моему), чтобы построить, если Реагирует как модуль CommonJS. Значение этого

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 - ссылка на репо, если у кого есть время и хочет поближе познакомиться. Или, может быть, проверьте время сборки.

Answer 1

Это потому, что React идет и требует нескольких вещей, что означает, что ваш браузер должен проходить через большее количество узлов.

Один из способов, которым вы могли бы улучшить это, - это предопределить Реагирование. Однако это только улучшит библиотеку React, добавит другую библиотеку, и она будет замедляться снова.

Одна вещь, которую вы можете использовать для улучшения Возврат, добавив, что уделите внимание процессу связывания вашего браузера.

Дайте это попробовать

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 в процессе производства, если вы не хотите, чтобы процесс сборки зависел, так как он просматривает ваши файлы.

Answer 2

Просьба посмотреть мой репо https://github.com/skrobek/react-gulp-browserify. Я использую точно такой же технический стек: gulp, браунирую, реагирую.