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

请点击这里查看我的代码https://github.com/steelx/ReactBasic ReactJs简单的项目js文件大小是巨大的

一旦运行gulp ，去./public/文件夹，你可以看到main.js其文件大小为1.8MB

我需要了解，为什么它如此巨大。

来源

2015-11-02 STEEL

使用uglify缩小的裸骨骼反应项目大约为200kb。这个尺寸缩小了吗？ –

这个尺寸听起来对于一个未统一的React项目来说是正确的，一旦你缩小了，它就会变得更小。我有一个3MB的unminified项目，这是300kb缩小，不到100kb gzipped。 –

为了得到一个简装生产版本，你将需要：

在browserify配置设置debug到false - 您目前有它设置为true，所以它的产生占大多数一sourcemap的大小。
使用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" 
    } 
}

来源

2015-11-02 13:03:52

-2

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

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

以我个人的经验来看，React项目的1.8MB是正常的。

当你把它放在生产中时，你当然会缩小和压缩javascript。

来源

2015-11-02 11:28:46 zwippie

如果我使用webpack将jsx编译为js，那么我需要React和React.DOM相关的文件吗？ – divine

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

回答

相关问题