Question

我的问题很简单：我正在使用Fusebox开发一个简单的React应用程序。在我的Chrome浏览器中，我有React插件，告诉我我没有运行生产版本（即使我尝试运行生产版本）。

该链接上的插件点：https://facebook.github.io/react/docs/optimizing-performance.html#use-the-production-build

当我检查webpack时，唯一要做的就是在NODE_ENV设置为'production'的情况下运行所有内容并添加Uglify插件。

当我在Fusebox中做同样的事情时，我不断收到关于“不运行生成版本”的警告，所以我认为有些问题。

这是我的fuse.js：

const { FuseBox, BabelPlugin, CSSPlugin, EnvPlugin, UglifyJSPlugin, WebIndexPlugin } = require("fuse-box");

const prod = true;

const fuse = FuseBox.init({
    homeDir: "src",
    output: "docs/$name",
    sourceMaps: !prod,
    plugins: [
        EnvPlugin({ NODE_ENV: prod ? 'production' : 'development' }),
        CSSPlugin(),
        BabelPlugin({
            config: {
                sourceMaps: !prod,
                presets: [ "es2015" ],
                plugins: [ "transform-react-jsx" ],
            }
        }),
        WebIndexPlugin({ path: ".", template: 'src/index.html' }),
        prod && UglifyJSPlugin()
    ]
});

if(!prod) {
    fuse.dev();
}

let vendor = fuse.bundle("vendor.js").instructions("~index.js");
let app = fuse.bundle("app.js").instructions(">[index.js]");

if(!prod) {
    app.watch().hmr();
}

fuse.run();

你知道为什么我仍然会收到警告吗？我如何解决这个问题以获得React的生产版本？（我想这是一个愚蠢的问题，但我在这里看不到解决方案...）提前致谢！ ;）

Answer 1

还有一些你没有做的事情可能导致React插件的投诉。在生产模式中，您可以应用以下babel转换进行其他优化：

"transform-react-remove-prop-types"。最有可能的原因是，因为道具类型只会给代码增加不必要的重量。
"transform-react-constant-elements"
"transform-react-inline-elements"

Answer 2

我终于解决了！

似乎一切都在Quantum插件中。使用此配置，网站将验证为生产就绪：

const { FuseBox, BabelPlugin, CSSPlugin, QuantumPlugin, WebIndexPlugin } = require('fuse-box');

const prod = true;

const fuse = FuseBox.init({
    homeDir: 'src',
    output: 'docs/$name',
    sourceMaps: !prod,
    plugins: [
        CSSPlugin(),
        BabelPlugin({
            config: {
                sourceMaps: !prod,
                presets: [ 'es2015' ],
                plugins: [ 'transform-react-jsx' ]
            }
        }),
        WebIndexPlugin({ path: '.', template: 'src/index.html' }),
        prod && QuantumPlugin({
            removeExportsInterop: false,
            uglify: true
        })
    ]
});

if(!prod) {
    fuse.dev();
}

let vendor = fuse.bundle('vendor.js').instructions('~index.js');
let app = fuse.bundle('app.js').instructions('>[index.js]');

if(!prod) {
    app.watch().hmr();
}

fuse.run();

无需添加EnvPlugin和UglifyPlugin，QuantumPlugin为您完成工作！我不太确定我传递给这个插件的配置，我会获取更多文档。我已经找到了灵感，感谢此页：https://github.com/fuse-box/react-example/blob/master/fuse.js。

希望这可以帮助将来的某个人！

反应和保险丝盒：生产构建

2 个答案: