React Js – 如何保持bundle.min.js小？

我对React和javascript dev很新。 我习惯于java构build工具，所以现在使用NPM我有一个新的构build工具的学习景观。 我正在进入我的项目，我注意到，我的缩小，丑化束仍然〜275kb，我想知道如何这可以扩展到一个大尺寸的应用程序。 我的原始源代码本身只有34kb，但是当然我必须将所有这些框架和其他东西都拉进去。

那么 – 我应该如何保持我的应用程序的大小，因为我的应用程序增长？ 我在网上阅读的东西有点难，因为很多人似乎在使用Grunt，但是我只是使用下面的包中的npm start和npm run build。

我应该以不同的方式pipe理我的require（）以防止重复包装？ 我不知道从哪里开始

这是我的package.json：

{ "name": "someapp", "version": "0.0.1", "description": "foo", "repository": "", "main": "js/app.js", "dependencies": { "classnames": "^2.1.3", "flux": "^2.0.1", "jquery": "^2.2.0", "keymirror": "~0.1.0", "object-assign": "^1.0.0", "react": "^0.12.0" }, "devDependencies": { "browserify": "^6.2.0", "envify": "^3.0.0", "jest-cli": "^0.4.3", "reactify": "^0.15.2", "uglify-js": "~2.4.15", "watchify": "^2.1.1" }, "scripts": { "start": "watchify -o js/bundle.js -v -d js/app.js", "build": "browserify . -t [envify --NODE_ENV production] | uglifyjs -cm > js/bundle.min.js", "test": "jest" }, "author": "Some Guy", "browserify": { "transform": [ "reactify", "envify" ] }, "jest": { "rootDir": "./js" } } 

Answer 1

我用Webpack能够取得相当不错的成绩。 我在为React + ES6应用程序优化Webpack Prod Build中写了这个

这是我的Webpackconfiguration：

 var webpack = require('webpack'); var path = require('path'); var nodeEnv = process.env.NODE_ENV || 'development'; var isProd = nodeEnv === 'production'; module.exports = { devtool: isProd ? 'cheap-module-source-map' : 'eval', context: path.join(__dirname, './client'), entry: { jsx: './index.js', html: './index.html', vendor: ['react'] }, output: { path: path.join(__dirname, './static'), filename: 'bundle.js', }, module: { loaders: [ { test: /\.html$/, loader: 'file?name=[name].[ext]' }, { test: /\.css$/, loaders: [ 'style-loader', 'css-loader' ] }, { test: /\.(js|jsx)$/, exclude: /node_modules/, loaders: [ 'react-hot', 'babel-loader' ] }, ], }, resolve: { extensions: ['', '.js', '.jsx'], root: [ path.resolve('./client') ] }, plugins: [ new webpack.optimize.CommonsChunkPlugin('vendor', 'vendor.bundle.js'), new webpack.optimize.UglifyJsPlugin({ compress: { warnings: false }, sourceMap: false }), new webpack.DefinePlugin({ 'process.env': { NODE_ENV: JSON.stringify(nodeEnv) } }) ], devServer: { contentBase: './client', hot: true } }; 

需要考虑的两个要点是：

 devtool: isProd ? 'cheap-module-source-map' : 'eval', 

这将输出最小的源代码，并将使用外部文件，这是最好的最终的包大小。

  plugins: [ new webpack.optimize.CommonsChunkPlugin('vendor', 'vendor.bundle.js'), new webpack.optimize.UglifyJsPlugin({ compress: { warnings: false }, sourceMap: false }), new webpack.DefinePlugin({ 'process.env': { NODE_ENV: JSON.stringify(nodeEnv) } }) ], 

Uglify – 你可能知道它的作用。 再加上process.env设置将从React lib中删除相当多的开发代码。

CommonsChunkPlugin将允许你捆绑库（或其他你喜欢的块）来分离构build文件。 这是非常棒的，因为它允许你为供应商库设置不同的caching模式。 例如，您可以比业务逻辑文件更积极地caching这些文件。

哦，如果你在意我的package.json匹配这个webpackconfiguration：

 "scripts": { "start": "webpack-dev-server --history-api-fallback --hot --inline --progress --colors --port 3000", "build": "NODE_ENV=production webpack --progress --colors" }, "devDependencies": { "babel-core": "^6.3.26", "babel-loader": "^6.2.0", "babel-plugin-transform-runtime": "^6.3.13", "babel-preset-es2015": "^6.3.13", "babel-preset-react": "^6.3.13", "file-loader": "^0.8.4", "webpack": "^1.12.2", "webpack-dev-server": "^1.12.0", "webpack-hot-middleware": "^2.2.0" } 

编辑：树颤抖是Webpack 2中预期的一个shiny的新版本（目前在testing版）。 再加上上面的configuration，这将是一个杀手级的function，将显着缩减您的最终捆绑。

编辑2：Webpack 2我修改了一个现有的示例应用程序使用Webpack 2configuration。 这导致了额外的28％的节省。 在这里看到这个项目： Webpack 2示例configuration项目