Reactjs 大口大口大口大口大口大口大口大口大口大口大口大口大口大口大口大口大口大口大口大口大口大口大口大口大口大口大口

我遇到了一个奇怪的问题，需要你的帮助来弄清楚到底发生了什么

我已经将gulp配置为在ES6中用React.js编写的a测试。我使用了

browserify

来设置CommonJS-env和

babelify

以获得更大的ES6支持。如果CommonJS模块需要React，那么一切都可以正常工作，只是需要花费太长的时间（在我看来）来构建。这是什么意思

import React from 'react';

行将在初始构建时将捆绑包/编译时间从

1.2秒

提高到约

4秒

，然后当检测到任何更改时，重建js文件大约需要

2.5秒

。当包含更多模块时，这一时间会迅速增加。我的工作是将

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"
  ]
}

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

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

但这没有帮助

据我所知，我使用的是最新的软件包，意思是：

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

在节点v4.1.0上。有人有什么想法吗？无论如何，请分享

附言。
如果有人有时间并且想仔细观察，则是与回购协议的链接。或者，也许，测试构建时间。
这是因为React需要做一些事情，这意味着您的browserify必须遍历更多节点

一种可能改善这一点的方法是预绑定反应。但是，这只会改进React库，添加另一个库，它会再次减慢速度

有一件事可以用来改进重新处理，那就是将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、FullPath）

Watchify将通过缓存绑定的文件来加快重新处理过程

！重要提示

请记住在生产环境中删除watchify，除非您确定构建过程将挂起，因为它正在监视您的文件。
请查看我的repo。我使用的是完全相同的技术堆栈：gulp、browserify、react。
我添加了
watchify
和所需的选项，但不起作用，重新处理过程保持不变。您添加了缓存、packageCache和FullPath吗？事实上，我已将其传递到
browserify
的选项对象。Opps，将其更改了一点，尝试this@Nazariy顺便说一句，这不是关于第一次编译，而是关于后续编译，即当您更改文件并为您重新编译时。因此，使用cache/packageCache变量可以缓存绑定的代码，以便更快地重新编译更改。我们无法逃避afaik第一次编译花费的时间。我已经查看了您的配置，就我所能看到的不同之处在于，您连接了
update
事件，尝试了一下，但对我没有多大帮助