我想将我的 React 应用程序压缩为 gzip,实际上它是 2.2 mb,所以我使用了 compression-webpack-plugin 但我无法压缩
我的webpack.config.js
const webpack = require('webpack');
const path = require('path');
const fs = require("fs")
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
const CompressionPlugin = require('compression-webpack-plugin');
const VENDOR_LIBS =[
'antd','axios','moment','rc-time-picker','react',
'react-dom','react-ga','react-google-maps','react-loadable',
'react-redux','react-router','react-router-dom','recompose','redux','redux-thunk'
]
module.exports = (env) => {
const isProduction = env === 'production';
const CSSExtract = new ExtractTextPlugin('styles.css');
return {
node: {
fs: 'empty',
child_process: 'empty',
},
entry: {
bundle:'./src/app.js',
vendor:VENDOR_LIBS
},
output: {
path: path.join(__dirname, 'public'),
filename: '[name].js'
},
module: {
rules: [{
loader: 'babel-loader',
test: /\.js$/,
exclude: /node_modules/
}, {
test: /\.s?css$/,
use: CSSExtract.extract({
use: [
{
loader: 'css-loader',
options: {
sourceMap: true
}
},
{
loader: 'sass-loader',
options: {
sourceMap: true
}
}
]
})
},{
test: /\.(gif|svg|jpg|png|ttf|eot|woff(2)?)(\?[a-z0-9=&.]+)?$/,
loader: "file-loader",
}],
},
plugins: [
CSSExtract,
new webpack.optimize.CommonsChunkPlugin({
name:'vendor'
}),
new HtmlWebpackPlugin({
template:'src/index.html'
}),
new CompressionPlugin(),
new BundleAnalyzerPlugin()
],
devtool: isProduction ? 'source-map' : 'inline-source-map',
devServer: {
contentBase: path.join(__dirname, 'public'),
historyApiFallback: true,
host:'0.0.0.0',
disableHostCheck: true,
}
};
};
它显示错误
TypeError: Cannot read property 'emit' of undefined
at CompressionPlugin.apply (/media/.........
if i add addition options to the CompressionPlugin like
new CompressionPlugin({
asset: '[path].gz[query]',
algorithm: 'gzip',
test: /\.js$|\.css$|\.html$|\.eot?.+$|\.ttf?.+$|\.woff?.+$|\.svg?.+$/,
threshold: 10240,
minRatio: 0.8
})
它向我显示错误
throw new ValidationError(ajv.errors, name);
ValidationError: Compression Plugin Invalid Options
options should NOT have additional properties
我该如何解决这个问题,或者有没有其他方法来 gzip 我的应用程序。
最佳答案
将“ Assets ”更改为“文件名”。
new CompressionPlugin({
filename: '[path].gz[query]',
algorithm: 'gzip',
test: /\.js$|\.css$|\.html$|\.eot?.+$|\.ttf?.+$|\.woff?.+$|\.svg?.+$/,
threshold: 10240,
minRatio: 0.8
})
关于reactjs - 无法在 webpack 中压缩为 gzip,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52274875/