ReactJs简单的项目js文件大小很大

Question

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

运行gulp 并转到./public/文件夹后,您可以看到main.js其文件大小为1.8MB

我需要明白,为什么它如此巨大.

Answer 1

要获得精简的生产构建,您需要:

1. 设置debug为false在您的browserify配置中 - 您当前已将其设置为true,因此它会生成一个占大部分大小的源图.
2. 使用envify替换process.env.NODE_ENVReact源中的引用'production'.
3. 使用uglify缩小代码.需要执行步骤2以允许执行死代码uglify执行以从React代码库中删除开发代码块.

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

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