Question

TL;DR: I'm getting build files that are way too big. I want them to be small and use the React source files from a CDN.

My Gulp file contains this:

`Crashlytics could not find the manifest`
com.crashlytics.tools.android.project.ManifestData$ManifestIOException: Crashlytics could not find the manifest. Not found at .../app/build/intermediates/manifests/full/prod/staging/AndroidManifest.xml

And said 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)); }); file contains:

index.jsx

React Redux is pretty small. And if I remove that part from the latter file the result is a mere 1 KB in size. Otherwise it'll turn into 700Kb+.

I already removed these two lines from that file:

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

Because I wanted to load React and ReactDOM from a CDN. Why are my files still this incredibly large?

Answer 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'
}))

//...

更多资源：http://dev.topheman.com/make-your-react-production-minified-version-with-webpack/

Answer 2

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

在这种情况下，您的生产Webpack配置应在{ // ... externals: { "react": "React", "react-dom": "ReactDOM" }, // ... }配置选项中指定React：

devtool

否则Webpack会捆绑它。

还要验证生产配置中没有'eval'选项。如果您使用readonly甚至内联源图，它会极大地破坏代码。

我知道uglify，但我不想让我的代码变得丑陋

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

Gulp and Browserify turn my React Redux into a huge file even though I removed the React dependencies

2 个答案: