Question

我遇到了一个奇怪的问题，需要你的帮助才能知道发生了什么。

我已经配置了gulp来构建我在ES6中用 React.js 编写的测试。我已使用browserify设置CommonJS env和babelify以获得更大的ES6支持。一切正常，如果需要 React 作为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"
  ]
}

我在 buildApp ignore中尝试了function选项，如下所示：

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

但这没有帮助。

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

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

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

P.S。如果有人有时间并且想要仔细观察，Here是回购的链接。或者，也许，测试构建时间。

Answer 1

这是因为React需要一些东西，这意味着你的浏览器必须遍历更多的节点。

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

您可以使用一件事来改善重新绑定，方法是将watchify添加到您的浏览器捆绑流程中。

试一试

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中并添加一些额外的属性（cache，packageCache，fullPaths）

Watchify将通过缓存捆绑的文件来加快您的重新绑定过程。

！重要提示

请记住在生产中删除watchify，除非您的构建过程因为它正在观看您的文件而挂起。

Answer 2

请查看我的回购https://github.com/skrobek/react-gulp-browserify。我正在使用完全相同的技术堆栈：gulp，browserify，react。

浏览器捆绑时间需要太长时间

2 个答案: