ReactJs简单项目js文件体积巨大

Question

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

一旦你运行 gulp 然后进入./public/文件夹，你可以看到main.js它的文件大小是1.8MB

我需要理解，为什么这么大。

Answer 1

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

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

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

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

Answer 2

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

在您的 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"
  }
}

ReactJs简单项目js文件体积巨大

ReactJs simple project js file size is huge

reactjs

gulp

filesize