bundle.js在webpack項目中太大

我正在嘗試創建一個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;

來源

2016-12-28 Nir Kogman

是的。捆綁將根據您的依賴性增長。 webpack將打包您使用導入的所有依賴關係。另一種方式是在部署時儘可能使用CDN，並使用babel將ES6轉換爲ES5作爲反應組件。 – subash

它總是依賴於你與之捆綁的庫。您還可以嘗試拆分供應商庫和應用程序代碼之間的捆綁包。這樣，客戶端可以緩存供應商，而不必再次下載它。你也可以使用Webpack DLL的方法，在之後分割並加速編譯（如果你使用的是像hmr這樣的工具） – gretro

它很大程度上取決於您的依賴關係。您可以忽略ie8並重新刪除您的依賴項以刪除一些kB：

var config = { 
    entry: APP_DIR + '/index.jsx', 
    output: { 
    path: BUILD_DIR, 
    filename: 'bundle.js' 
    }, 
    plugins: [ 
    new webpack.NoErrorsPlugin(), 
    new webpack.DefinePlugin({ 'process.env.NODE_ENV': '"production"' }), 
    new webpack.optimize.OccurrenceOrderPlugin(), 
    new webpack.optimize.DedupePlugin(), 
    new webpack.optimize.UglifyJsPlugin({ 
     compress: { 
     screw_ie8: true, 
     warnings: false 
     }, 
     mangle: { 
     screw_ie8: true 
     }, 
     output: { 
     comments: false, 
     screw_ie8: true 
     } 
    }) 
    ] 
};

來源

2016-12-28 16:49:42 Tholle

-1

你總是可以嘗試使用JavaScript 「縮小」工具。它壓縮優化您的代碼。在谷歌搜索javascript minify。

來源

2016-12-28 15:54:24

通常包含很多依賴關係，因此這個大小並不罕見。嘗試生成您的軟件包時，使用下列標誌：

--optimize-minimize - Minifies捆綁

--optimize-occurrence-order - 優化塊標識

--optimize-dedupe - 刪除重複的代碼相同件

更多的話題here。

來源

2016-12-28 16:00:26

bundle.js在webpack項目中太大

回答

相關問題