gulp browserify 捆绑时间太长 [英] gulp browserify bundle time takes too long

问题描述

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

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

我已经配置 gulp 来构建我在 ES6 中用 React.js 编写的测试.我使用 browserify 来设置 CommonJS env 和 babelify 以获得更大的 ES6 支持.一切正常，如果需要 React 作为 CommonJS 模块，则构建时间太长(在我看来).意思是这个

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 将在初始构建时将包/编译时间从 1.2secs 提高到 4secs 左右，然后当检测到任何更改时，大约需要 2.5secs 重建js文件.当包含更多模块时，这个时间会迅速增加.我的解决方法是配置 bower 以在浏览器中将任何外部库公开为全局变量，不太喜欢这种解决方案.

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.

这是我的主要 browserify 设置:

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

并通过 packages.json

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

我确实尝试了 buildApp function 中的 ignore 选项，如下所示:

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

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

但这并没有帮助.

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

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

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

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

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

附:Here 如果有人有时间想仔细看看，这里是指向 repo 的链接.或者，也许，测试构建时间.

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.

推荐答案

这是因为 React 需要一些东西，这意味着您的 browserify 必须遍历更多节点.

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

您可能能够改进这一点的一种方法是预先捆绑 React.但是，这只会改进 React 库，添加另一个库，它会再次变慢.

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.

您可以用来改进重新捆绑的一件事是将 watchify 添加到您的 browserify 捆绑过程中.

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

试试这个

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)

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

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

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

！重要提示

记得在生产中删除 watchify，除非你的构建过程会挂起，因为它正在监视你的文件.

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

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