Gulp 和 Browserify 将我的 React Redux 变成了一个巨大的文件，即使我删除了 React 依赖项答案

【问题标题】：Gulp and Browserify turn my React Redux into a huge file even though I removed the React dependenciesGulp 和 Browserify 将我的 React Redux 变成了一个巨大的文件，即使我删除了 React 依赖项
【发布时间】：2016-02-12 20:17:50
【问题描述】：

TL;DR：我得到的构建文件太大了。我希望它们变小并使用 CDN 中的 React 源文件。

我的 Gulp 文件包含以下内容：

gulp.task('build', () => {
    browserify({
        entries: dirs.src + '/index.jsx',
        extensions: ['.jsx'],
        debug: false
    })
    .transform(babelify.configure({
        presets: ["es2015", "react"]
    }))
    .bundle()
    .pipe(source('index.js'))
    .pipe(gulp.dest(dirs.dest));
});

并说index.jsx文件包含：

import { Provider } from 'react-redux';
import slides from './stores/slides';

const store = slides();

ReactDOM.render(
    <Provider store={store}>
        <h1>Test</h1>
    </Provider>,
    document.getElementById('target')
);

React Redux 非常小。如果我从后一个文件中删除该部分，结果大小仅为 1 KB。否则会变成 700Kb+。

我已经从该文件中删除了这两行：

import React, { Component } from 'react';
import ReactDOM from 'react-dom';

因为我想从 CDN 加载 React 和 ReactDOM。为什么我的文件还是这么大？

【问题讨论】：

确保在生产 Webpack 配置中没有 devtool。

标签： reactjs gulp browserify babeljs redux

【解决方案1】：

您当前正在使用 React 的开发版本。您必须构建自己的生产版本，因为 process.env.NODE_ENV 标志必须设置为 production。

如果你使用的是browserify，你需要envify：https://github.com/hughsk/envify

npm install envify --save-dev

你的 Gulpfile.js

var envify = require('envify/custom');

//...

.transform(babelify.configure({
    presets: ["es2015", "react"]
}))
.transform(envify({
    NODE_ENV: 'production'
}))

//...

【讨论】：

不确定我是否遵循，但我实现了您的答案并且文件仍然很大。它们仍然包含完整的 React 和 ReactDOM。我不想要他们中的任何一个，也不明白他们来自哪里。看起来 Redux 正在添加所有这些......
您需要在转换末尾添加uglify，这将缩小所有捆绑包并删除死代码。它应该是 .tranform(uglify()) 之类的东西，你会从 gulp-uglify 得到 uglify（关于这个的帖子很多）
我知道 uglify，但我不希望我的代码被 uglify：我只想要我的组件代码。不是整个 React 库。我正在通过 CDN 中的脚本标签加载 Ready。我不想在我自己的本地项目文件中拥有整个 React 代码库……而且，它正在开发中……我不想在开发中使用丑陋的代码，只是在生产中。

【解决方案2】：

我正在通过 CDN 中的脚本标签加载 Ready。我不想在我自己的本地项目文件中拥有整个 React 代码库。

在这种情况下，您的生产 Webpack 配置应该在 externals 配置选项中指定 React：

{
  // ...
  externals: {
    "react": "React",
    "react-dom": "ReactDOM"
  },
  // ...
}

否则 Webpack 会打包它。

还要确认您在生产配置中没有 devtool 选项。如果您使用'eval' 甚至内联源映射，它可能会极大地膨胀代码。

我知道 uglify，但我不希望我的代码被 uglify

您应该在生产中为您的代码使用 uglify。这是进行小型构建的唯一方法。

【讨论】：