我正在使用webpack来构建我的react应用程序,它创建了4 Mb大小的bundle.js,它非常巨大,如何减小该大小,这是我的webpack.config.js,我还应该使用什么插件
我正在使用的插件列表,请建议其他有助于减少捆绑文件大小或我的配置有问题的插件。
var compressionPlugin = require('compression-webpack-plugin');
var copyWebpackPlugin = require('copy-webpack-plugin');
var extractTextWebpackPlugin = require('extract-text-webpack-plugin');
var htmlWebpackPlugin = require('html-webpack-plugin');
var path = require('path');
var webpack = require('webpack');
var UglifyJSPlugin = require('uglifyjs-webpack-plugin');
// Setup config.
module.exports = {
devServer: {
port: API === 'local' ? 8081 : 8080
},
devtool: DEBUG ? 'inline-source-map' : false,
entry: [
'whatwg-fetch',
path.join(__dirname, PATH)
],
module: {
loaders: [
{
exclude: /(bower_components|node_modules)/,
loader: 'babel-loader',
query: {
plugins: [
'transform-class-properties',
'transform-object-rest-spread',
'transform-runtime'
],
presets: ['latest', 'react']
},
test: /\.jsx?$/
},
{
test: /\.scss?$/,
use: CssPlugin.extract({
fallback: 'style-loader',
use: ['css-loader', 'sass-loader']
})
},
{
loader: 'worker-loader',
options: {
name: '[name].js',
inline: true
},
test: /\.worker\.js$/
}
]
},
output: {
filename: '[name].bundle.[chunkhash].js',
path: path.join(__dirname, './dist'),
chunkFilename: "[name].[chunkhash].js",
publicPath: '/'
},
plugins: plugins,
resolve: {
extensions: ['.js', '.jsx']
}
};
答案 0 :(得分:0)
您应该使用webpack-bundle-analyzer分析捆绑软件以识别原因。 然后您可以split your bundle。我发现反应懒惰是一个不错的选择。
最后,您可以尝试使用一些webpack插件来减少捆绑包,例如:compression-webpack-plugin,重复数据删除插件,uglifyjs-plugin,ignore-plugin