reactjs - 无法在 webpack 中压缩成 gzip
问题描述
我想将我的 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/.........如果我向CompressionPlugin
添加附加选项,例如
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:压缩插件无效选项
选项不应具有其他属性
我该如何解决这个问题,或者有没有其他方法可以压缩我的应用程序。
解决方案
将“资产”更改为“文件名”。
new CompressionPlugin({
filename: '[path].gz[query]',
algorithm: 'gzip',
test: /\.js$|\.css$|\.html$|\.eot?.+$|\.ttf?.+$|\.woff?.+$|\.svg?.+$/,
threshold: 10240,
minRatio: 0.8
})
推荐阅读
- javascript - 将 .map 方法应用于对象数组
- reactjs - 如何使用 React.forwardRef 暴露孩子的方法?
- javascript - 如何在html表中重做classchange
- python - 装饰器与没有包装器的函数 - Python
- oracle - PL Sql 分层分支求和
- android - 圆角方形背景形状,右上角有切出的圆圈
- amazon-web-services - 从 UTC 时区查询 AWS athena 会给出不完整的成本结果
- android - Android Kotlin:对适配器中的数据进行排序并保持翻译
- python-3.x - pytesseract 也没有正确识别数字,它检测到虚线 0 为 8
- python - 模块“张量流”没有属性“会话”