为什么我的Webpack ReactJS应用程序如此之大？

我在包装我的Webpack ReactJS应用程序时发现了许多技巧。不幸的是，文件大小仍然是3MB。我究竟做错了什么？为什么我的Webpack ReactJS应用程序如此之大？

这里是我的WebPack配置文件：

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

module.exports = { 
    devtool: 'cheap-module-eval-source-map', 
    entry: [ 
    'webpack-hot-middleware/client', 
    './index' 
    ], 
    output: { 
    path: path.join(__dirname, 'dist'), 
    filename: 'bundle-webpack.js', 
    publicPath: './' 
    }, 
    plugins: [ 
    new webpack.optimize.OccurenceOrderPlugin(), 
    new webpack.HotModuleReplacementPlugin(), 
    new webpack.NoErrorsPlugin(), 
    new webpack.DefinePlugin({ 
     'process.env.NODE_ENV': JSON.stringify('production') 
    }), 
    new webpack.optimize.UglifyJsPlugin({ 
     compress: { 
     screw_ie8: true, 
     warnings: false 
     } 
    }) 
    ], 
    module: { 
    loaders: [ 
     { 
     test: /\.js$/, 
     loaders: [ 'babel' ], 
     exclude: /node_modules/, 
     include: __dirname 
     }, 
     { 
     test: /\.css$/, 
     loader: "style-loader!css-loader" 
     }, 
     {test: /node_modules\/react-chatview/, loader: 'babel' } 
    ] 
    } 
}

任何帮助将不胜感激！

我使用以下命令将它打包：

> NODE_ENV=production webpack -p

我得到以下输出：

bundle-webpack.js 3.1 MB  0 [emitted] main

最佳，

亚伦

来源

2016-03-08 Aaron Franco

所以，事实证明，大卫L.沃尔什是正确的，我有太多的开发东西在我的应用程序。但是，所提供的答案并未解决问题。

我使用3个步骤解决了问题。

按照David的指示，从我的webpack配置中删除所有“热重载”插件。
从我的.babelrc文件中删除热再装“react-transform”插件。
改变“devtool”参数设置为“源映射”从“便宜模块-EVAL-源地图”

以下这些步骤之后，最终的包文件是340KB，而源地图仍然3MB。幸运的是，我不需要在我的应用程序中包含源地图，因此它可以在340kb下载，这仍然相当大，但对于在现代互联网连接上运行的现代浏览器而言是合理的。

我想大卫的回答，但我没有足够的声望点尚未这样做。

来源

2016-03-08 19:12:49

您好像还在那里得到了相当数量的开发工具，例如热模块更换。

请参阅webpack.config.prod.js React Transform Boilerplate作为指南。

您还可以通过只包含所需包装的部分并将其余部分省略，从而优化进口。请参阅：Reduce Your bundle.js File Size By Doing This One Thing。

来源

2016-03-08 00:57:23

感谢您的回复David！我跟着你没有运气给我的指南。以下是我现在得到的输出。捆prod.js 349 KB 0发出]主 bundle-prod.js.map 3.13 MB 0 [发出]主 [0]的多主28个字节{0} [内置] + 629个隐藏模块我真的不明白我错过了什么。我的应用程序是一个非常简单的ReactJS + Redux应用程序。 –

为什么我的Webpack ReactJS应用程序如此之大？

回答

相关问题