[英]How to reduce bundle.js file size of react using webpack
我正在使用webpack来构建我的react应用程序,它创建了bundle.js的4 Mb大小非常大,如何减小该大小,这是我的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插件来减少捆绑包,例如:compression-webpack-plugin,重复数据删除插件,uglifyjs-plugin,ignore-plugin
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.