使用Webpack獲取React App Production Ready

我對使用Webpack很感興趣，並且試圖將ES6中的React應用程序轉換爲可接受的生產就緒大小。輸出文件仍然太大，並且React仍在輸出警告（主要是關於生產文件）。使用Webpack獲取React App Production Ready

任何人都可以幫助我解決問題，應該在我的配置文件中更新哪些內容？

這是我目前擁有的。

var webpack = require('webpack'); 
var PROD = JSON.parse(process.env.PROD_ENV || '0'); 

module.exports = { 
    entry: "./app/App.js", 
    output: { 
    filename: "public/bundle.js" 
    }, 
    module: { 
    loaders: [ 
     { 
     test: /\.jsx?$/, 
     exclude: /node_modules/, 
     loader: 'babel', 
     query: { 
      presets: ['react', 'es2015'] 
     } 
     } 
    ] 
    }, 
    plugins: PROD ? [ 
    new webpack.optimize.UglifyJsPlugin({ 
     compress: { warnings: true } 
    }) 
    ] : [] 
}

來源

2016-05-05 Mattador

你可以做很多較小的調整，對於單個答案可能太多了。我已經寫了關於這個主題[這裏]（http://survivejs.com/webpack/building-with-webpack/）。我認爲通過'DefinePlugin'將'process.env.NODE_ENV'設置爲'production'將會有所幫助。你也可以考慮[使用react-lite或其他]（http://survivejs.com/webpack/advanced-techniques/configuring-react/）。 –

我已經放棄了圍繞webpack配置的頭部，並開始使用[hjs-webpack]（https://github.com/HenrikJoreteg/hjs-webpack）來完成所有的事情，並且讓我花費時間實際編寫代碼:) – ivarni

這裏是我的插件生產的列表構建：

plugins: [ 
    new webpack.optimize.OccurenceOrderPlugin(), 
    new webpack.optimize.DedupePlugin(), 
    new webpack.DefinePlugin({ 
    'process.env': { 
     'NODE_ENV': JSON.stringify('production') 
    } 
    }), 
    new webpack.optimize.UglifyJsPlugin({ 
    minimize: true, 
    compress: { 
     unused: true, 
     dead_code: true, 
     warnings: false, 
     screw_ie8: true 
    }, 
    compressor: { 
     warnings: false 
    } 
    }) 
]

此外，如果您發現該應用程序仍然是相當巨大的，我所採用的是的WebPack集束大小分析儀 （npm.js link）。它會顯示按大小排序的已使用依賴項的列表，它確實幫助我分析並丟棄了實際上並不需要的內容。

來源

2016-05-05 07:58:48 rapasoft

謝謝！把它降到了350k（這看起來還是有點大，但好得多）。我會嘗試一下尺寸分析儀，看看它是否有助於我優先考慮體面。 – Mattador

使用Webpack獲取React App Production Ready

回答

相關問題