ReactJs简单项目js文件大小巨大

Question

请在此处查看我的代码 https://github.com/steelx/ReactBasic

运行gulp后进入./public/文件夹，可以看到main.js文件大小为1.8MB

我需要了解，为什么它这么大。

Answer 1

要获得精简的生产版本，您需要:

1. 在 browserify 配置中将 debug 设置为 false - 目前您已将其设置为 true，因此它会生成一个占大多数的源映射的大小。
2. 使用envify将 React 源中对 process.env.NODE_ENV 的引用替换为 'Production'。
3. 使用uglify来缩小你的代码。需要执行第 2 步，以允许 uglify 执行死代码消除，以从 React 代码库中删除仅用于开发的代码块。

<小时/>

使用 webpack 的预期 bundle 大小示例执行上述步骤:

$ npm run build

> @ build /tmp/ReactBasic-master
> webpack

Hash: 8b3519309382e66318ad
Version: webpack 1.12.2
Time: 6486ms
      Asset     Size  Chunks             Chunk Names
    main.js   133 kB       0  [emitted]  main
main.js.map  1.54 MB       0  [emitted]  main
    + 157 hidden modules

$ gzip-size public/main.js
38376

此示例使用的

webpack.config.js:

process.env.NODE_ENV = 'production'

var path = require('path')
var webpack = require('webpack')

module.exports = {
  devtool: 'source-map',
  entry: './jsx/app.jsx',
  output: {
    filename: 'main.js',
    path: path.join(__dirname, 'public')
  },
  resolve: {
    extensions: ['', '.js', '.jsx']
  },
  plugins: [
    new webpack.DefinePlugin({
      'process.env.NODE_ENV': JSON.stringify('production')
    }),
    new webpack.optimize.UglifyJsPlugin({
      compress: {
        screw_ie8: true,
        warnings: false
      }
    })
  ],
  module: {
    loaders: [
      {test: /\.jsx?$/, loader: 'babel', exclude: /node_modules/}
    ]
  }
}

此示例使用的

package.json:

{
  "scripts": {
    "build": "webpack"
  },
  "dependencies": {
    "react": "0.14.1",
    "react-dom": "0.14.1",

    "babel-core": "5.8.33",
    "babel-loader": "5.3.3",
    "webpack": "1.12.2"
  }
}