Question

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

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

我需要明白，为什么它如此巨大。

Answer 1

要获得精简的生产构建，您需要：

在您的browserify配置中将debug设置为false - 您当前将其设置为true，因此它会生成一个占大部分尺寸的源地图。
使用envify将“React”源中process.env.NODE_ENV的引用替换为'production'。
使用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"
  }
}

Answer 2

main.js文件包含React，React.DOM，您的应用程序代码以及React或您的代码所需的所有其他依赖项，以及一些代码，以使所有这些模块加载和工作。

如果您对文件大小有疑问，请打开main.js并检查它。

根据我的个人经验，React项目的1.8MB是正常的。

当你把它投入生产时，你当然会缩小并压缩javascript。

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

2 个答案: