我正在嘗試創建一個react + babel + webpack項目。它的工作原理是 ,但bundle.js文件大小爲950KB。bundle.js在webpack項目中太大
是bundle.js總是那麼大? 如果不是,我該如何縮小尺寸?
這是我webpack.config.js:
var webpack = require('webpack');
var path = require('path');
var BUILD_DIR = path.resolve(__dirname, 'src/client/public');
var APP_DIR = path.resolve(__dirname, 'src/client/app');
var config = {
entry: APP_DIR + '/index.jsx',
output: {
path: BUILD_DIR,
filename: 'bundle.js'
},
plugins: [
new webpack.optimize.OccurenceOrderPlugin(),
new webpack.DefinePlugin({
'process.env': {
'NODE_ENV': JSON.stringify('production')
}
}),
new webpack.optimize.UglifyJsPlugin({
compressor: {
warnings: false
}
})
],
module : {
loaders : [
{
test : /\.jsx?/,
loader : 'babel',
query:
{
presets: ["es2015", 'react']
}
}
]
}
};
module.exports = config;
是的。捆綁將根據您的依賴性增長。 webpack將打包您使用導入的所有依賴關係。另一種方式是在部署時儘可能使用CDN,並使用babel將ES6轉換爲ES5作爲反應組件。 – subash
它總是依賴於你與之捆綁的庫。您還可以嘗試拆分供應商庫和應用程序代碼之間的捆綁包。這樣,客戶端可以緩存供應商,而不必再次下載它。你也可以使用Webpack DLL的方法,在之後分割並加速編譯(如果你使用的是像hmr這樣的工具) – gretro