我正在使用 webpack 来构建我的 react 应用程序,它正在创建 4 Mb 大小的捆绑包.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']
}
};
您应该使用 webpack-bundle-analyzer 来分析您的捆绑包,以识别原因。然后你可以拆分你的捆绑包。我发现反应懒惰是一个不错的选择。
最后,您可以尝试一些 webpack 插件来减少您的捆绑包,例如:压缩-webpack-plugin、重复数据删除插件、uglifyjs-plugin、ignore-plugin