gulp browserify 捆绑时间太长

IT技术 reactjs gulp browserify
2021-05-15 09:39:28

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

我已经配置了gulp来构建我在 ES6中用 React.js编写的测试。我曾经browserify设置过 CommonJS 环境并babelify获得更大的 ES6 支持。一切正常，如果需要将React作为 CommonJS module，构建它需要太长时间（在我看来）。这意味着

import React from 'react';

行将在初始构建时将捆绑/编译时间从1.2secs增加到 左右4secs，然后当检测到任何更改时，需要2.5secs重新构建js 文件。当包含更多module时，这个时间会迅速增加。我的工作是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在我的buildApp 中 尝试了该选项，function如下所示：

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

但这没有帮助。

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

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

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

PS 如果有人有时间想仔细看看，这里是 repo 的链接。或者，也许，测试构建时间。

2个回答

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

您可能能够改进这一点的一种方法是预捆绑 React。然而，这只会改进 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 中并添加一些额外的属性（缓存、包缓存、完整路径）

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

！重要的提示

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

请查看我的 repo https://github.com/skrobek/react-gulp-browserify。我使用的是完全相同的技术栈：gulp、browserify、react。

其它你可能感兴趣的问题
上一篇如何使用draft-js-mention-plugin以编程方式添加提及？ 下一篇单击或悬停在菜单区域外时关闭react按钮下拉菜单