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

Question

我对 React 和 javascript 开发还很陌生。我习惯了 java 构建工具，所以现在使用 NPM 我对构建工具有了新的认识。我刚刚开始我的项目，我注意到我的缩小、丑化包仍然是 ~275kb，我想知道这如何扩展到大型应用程序。我的原始源代码本身只有 34kb，但我当然必须引入所有这些框架等等。

那么 - 如何在应用程序增长时保持较小的应用程序大小？我很难理解我在网上阅读的内容，因为很多人似乎都在使用 G运行t，但我只是在下面的包上使用 npm start 和 npm 运行 build。

我是否应该以不同的方式管理我的 requires() 以防止重复打包？我不知道从哪里开始...

这是我的 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 取得了不错的效果。我在 Optimizing Webpack Prod Build for React + ES6 Apps

中写过这个

这是我的 Webpack 配置：

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 将允许您捆绑库（或您喜欢的其他块）以分离构建文件。这特别棒，因为它允许您为供应商库设置不同的缓存模式。例如。您可以比业务逻辑文件更积极地缓存它们。

哦，如果你想看看我的 package.json 匹配这个 webpack 配置：

"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"
  }

编辑： Tree shaking 是 Webpack 2（目前处于测试阶段）中的一个闪亮的新版本。结合上面的配置，这将是一个杀手级功能，可以显着缩小您的最终包。

编辑 2：Webpack 2 我修改了现有的示例应用程序以使用 Webpack 2 配置。它额外节省了 28%。在此处查看项目：Webpack 2 sample config project

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

React Js - how to keep bundle.min.js small?

javascript

node.js

reactjs

browserify

minify

需要考虑的两个关键点：