为什么我们在使用 Webpack 时需要 React 和 ReactDOM 作为模块？产生输出需要很长时间

Question

编辑：我错了。我正在使用 GULP、WEBPACK 和 BABEL，请查看我的答案。

---

我刚刚开始学习 React。基本上我见过的所有教程都使用 Webpack 和 babel。

Webpack 和 babel 很棒，但为什么大多数都需要 react 和 react-dom 作为模块与 webpack 捆绑文件一起打包？：

var React = require('react');

var ReactDOM = require('react-dom');

我们可以加载而不是通过 webpack 加载 react 的 cdn 文件位于 react 的安装页面 https://facebook.github.io/react/docs/installation.html 的底部，它比 webpack 输出的 react 模块小得多（至少对我来说，我已经推荐优化）。

页面有这些脚本标签：

开发文件（react 29kb，react-dom 137kb）：

<script src="https://unpkg.com/react@15/dist/react.js"></script>
<script src="https://unpkg.com/react-dom@15/dist/react-dom.js"></script>

生产文件（.min.js）（react 7kb，react-dom 36kb）：

<script src="https://unpkg.com/react@15/dist/react.min.js"></script>
<script src="https://unpkg.com/react-dom@15/dist/react-dom.min.js"></script>

生产文件总计 43kb，开发文件总计 166kb。 使用 webpack，我设法将 react 和 react-dom 缩小到 220kb。

对我来说，文件加载到浏览器时的大小与文件大小无关，至少在开发期间不会。

cdn 文件将生成 React 和 ReactDOM 全局变量，这确实很好，但我想将它们放在像教程这样的模块函数的本地会更好，虽然不会出现全局标识符冲突.问题在于，当我们需要 react.js npm 模块时，它本身有很多需要，依此类推，它会通过 webpack 和 babel 运行，这需要几秒钟才能在每次我们进行更改时生成捆绑文件在开发过程中，因为反应非常大。我们可以通过 webpack 的配置最小化 react 的输出这一事实并没有改变 webpack 需要一段时间才能产生最小化输出的事实。当我对我的 app.js 进行简单更改并希望捆绑文件尽快准备好时。

如果我使用 react cdn 文件并且仅将我自己的应用程序代码与 webpack 捆绑在一起，那么我的 app.js 中的更改几乎可以立即捆绑，而不是需要 react 大约需要 4-5 秒才能捆绑。

除了使用cdn之外，还有没有人可以解决这个问题？我可能以错误的方式使用 webpack 吗？

谢谢！

Answer 1

解决了！

正如 Lucas Katayama 在我的问题下的评论中指出的那样，webpack 开发服务器只会重新处理已更改的文件。因此，我相信它不必多次处理 React 和 ReactDOM。

我没有使用 webpack 开发服务器。我不想。我只是使用我自己的节点服务器文件，我正在使用 Gulp 来构建我项目中的各种事物。捆绑发生在 webpack-stream https://www.npmjs.com/package/webpack-stream

我做错了，我正在查看我所有的 javascript 文件是否有任何更改，然后每次都运行整个 webpack 进程（使用 gulp-watch 监视文件更改）。这是我的 gulp 文件运行缓慢时的内容（重新处理反应）：

var gulp = require('gulp');
var watch = require('gulp-watch');
var webpack = require('webpack-stream');
var webpackConfig = require('./webpack.config');
var browserSync = require('browser-sync').create();


gulp.task('js', function() {

    return watch('./src/js/**/*.js', function () {

        return gulp.src('./src/js/app.js')
            .pipe(webpack(webpackConfig))
            .pipe(gulp.dest('./dist/js/'))
            .pipe(browserSync.reload({stream: true}));

    });

});

我要做的是停止使用 gulp watch 观看我的 js 文件，我必须在我的 webpack.config.js 文件中添加一个新选项，该选项的名称是“watch”，它必须设置为 true。现在我的 gulp js 任务看起来像这样：

gulp.task('js', function() {

    return gulp.src('./src/js/app.js')
        .pipe(webpack(webpackConfig))
        .pipe(gulp.dest('./dist/js/'))
        .pipe(browserSync.reload({stream: true}));

});

我的 webpack.config.js 文件如下所示：

module.exports = {

  watch: true,

  output: {
      filename: "bundle.js"
  },

  module: {
      loaders: [
          {
              test: /\.jsx?$/,
              exclude: /(node_modules|bower_components)/,
              loader: "babel-loader",
              query: {
                  presets: ["latest", "react"],

                  plugins: [
                      "react-html-attrs",
                      "transform-class-properties",
                      "transform-decorators-legacy"
                  ]
              }
          }
      ]
  }

};

现在快多了。感谢卢卡斯的评论！