gulp browserify包时间过长 [英] gulp browserify bundle time takes too long

问题描述

我遇到了一个奇怪的问题，需要您的帮助来确定发生了什么。

我已经配置了gulp来构建我的测试， strong> React.js 在ES6中。我已经使用 browserify 来设置CommonJS env和 babelify 以获得更大的ES6支持。而且一切正常，如果CommonJS模块需要 React ，则需要花费很长时间（以我的观点来看）。意思是这个

  import从'react'反应; 
  

行将从 1.2secs 到大约 4secs ，然后当检测到任何变化时，大约需要 2.5secs 才能重建js文件。当包含更多模块时，这个时间会迅速增加。我的工作是配置 bower 以在浏览器中公开任何外部库作为全局库，不要太喜欢这个解决方案。

这是我的主要 browserify 设置：

 函数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 

} 
  

我尝试了在我的 buildApp 函数中忽略选项，如下所示：

  transform（babelify.configure（{
 ignore：/ node_modules / 
}）
  

但没有帮助。

据我所知，我正在使用最新的软件包， p>

 babelify：^ 6.3.0，
browserify：^ 11.2.0，
react：^ 0.14.0
  

在Node v4.1.0上。想法？通过一切手段，请分享。

PS
这里是回购的链接，如果有人有时间并想仔细观察。或者，也许测试构建时间。

你可能能够改善这种情况的一种方法是预缩React。然而，这只会改善React库，添加另一个库，它会再次放慢速度。

您可以使用一件事来改善重新绑定就是在你的browserify包过程中增加watchify。

试一试

  var watchify = require（'watchify'）; 
 var babelify = require（'babelify'）; 
 
 var bundler; 
 
函数buildApp（）{
 bundler = bundler || watchify（browserify（{
 entries：config.paths.jsx，
 extensions：['.jsx']，
 debug：true，
 transform：[babelify]，//这将使您可以使用babel作为jsx / es6 
缓存：{}，//需要watchify 
 packageCache：{}，//需要watchify 
 fullPaths：true //您可以在生产中更改此错误
）））
 
返回打包程序
 .bundle（）
 .on（'error'，onError）
 .pipe source（'app.js'））
 .pipe（gulp.dest（config.paths.dest））; 
} 
  

基本上你需要做的是将你的浏览器封装在watchify中并添加一些额外的属性（缓存，packageCache，fullPaths）

Watchify将通过缓存捆绑文件加速重新绑定过程。

<重要注意事项

请记住在生产环境中移除watchify，除非您在构建过程中会因为看到您的文件而挂起。 p>

I've ran into a strange issue and need your help to figure what's going on.

I've configured gulp to build my a test up written in React.js in ES6. I've used browserify to setup the CommonJS env and babelify for bigger ES6 support. And everything works, it just takes too long (in my opinion) to build if React is required as CommonJS module. Meaning this

import React from 'react';

line will raise the bundle/compile time from 1.2secs to around 4secs on the initial build, then when any changes are detected it takes around 2.5secs to rebuild the js files. And this time rapidly goes up when more modules are included. My work around was to configure bower to expose any external libraries as globals in the browser, don't like this solution as much.

Here is my main browserify setup:

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));
}

and the transform is added via packages.json

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

I did try the ignore option in my buildApp function as follows:

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

but that did not help.

I'm using the latest packages, as far as I know, meaning:

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

on Node v4.1.0. Anyone has any ideas? By all means, please share.

P.S. Here is the link to the repo if someone has the time and wants to take a closer look. Or, maybe, test the build time.

解决方案

This is because React goes and requires a couple of things which means your browserify has to traverse through more nodes.

One way you might be able to improve this is to prebundle React. However, this would only improve the React library, add another library and it will slow down again.

One thing you can use to improve rebundling is by adding watchify to your browserify bundle process.

Give this a try

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));
}   

Essentially what you need to do is wrap your browserify in a watchify and add some extra properties (cache, packageCache, fullPaths)

Watchify will speed up your rebundling process by caching the bundled files.

!Important Note

Remember to remove watchify in production, unless you're build process will hang since it's watching your files.

这篇关于gulp browserify包时间过长的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！