爲什麼我的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應用程序如此之大？

回答

相關問題