[英]Vuejs Webpack Compression Plugin not compressing
I need help debugging Webpack's Compression Plugin.我需要帮助调试 Webpack 的压缩插件。
SUMMARY OF PROBLEM问题总结
WHAT I TRIED我尝试了什么
config
.plugin('brotliCompress')
.use(CompressionWebpackPlugin, [{
exclude: /.map$/,
cache: true,
algorithm: 'brotliCompress',
test: /\.(js|css|html|svg)$/,
threshold: 10240,
minRatio: 0.8,
}])
config
.plugin('gzip')
.use(CompressionWebpackPlugin, [{
algorithm: 'gzip',
test: new RegExp('\\.(' + ['js', 'css'].join('|') + ')$'),
threshold: 8192, // Assets larger than 8192 bytes are not processed
minRatio: 0.8, // Assets compressing worse that this ratio are not processed
}])
config
.plugin('CompressionPlugin')
.use(CompressionWebpackPlugin)
vue invoke compression
in response to an IDE console message after I run vue add compression
as an alternative to using Webpack Chain API for compression configuration. (使用 vue-cli-plugin:compression)当我使用vue invoke compression
来响应 IDE 控制台消息时,由于缺少生成器错误,这会失败,因为我运行vue add compression
作为使用 Webpack Chain API 进行压缩配置的替代方法。 pluginOptions: {
compression: {
brotli: {
filename: '[file].br[query]',
algorithm: 'brotliCompress',
include: /\.(js|css|html|svg|json)(\?.*)?$/i,
minRatio: 0.8,
},
gzip: {
filename: '[file].gz[query]',
algorithm: 'gzip',
include: /\.(js|css|html|svg|json)(\?.*)?$/i,
minRatio: 0.8
}
}
},
POINTS OF SIGNIFICANCE意义点
REFERENCED LINKS/DOCS参考链接/文档
CODE代码
vue.config.js vue.config.js
const path = require('path')
const CompressionWebpackPlugin = require('compression-webpack-plugin')
function resolve (dir) {
return path.join(__dirname, dir)
}
module.exports = {
/* ....shortened for brevity */
// Compress option VI (with vue cli plugin, generator bug when invoked)
// pluginOptions: {
// compression: {
// brotli: {
// filename: '[file].br[query]',
// algorithm: 'brotliCompress',
// include: /\.(js|css|html|svg|json)(\?.*)?$/i,
// minRatio: 0.8,
// },
// gzip: {
// filename: '[file].gz[query]',
// algorithm: 'gzip',
// include: /\.(js|css|html|svg|json)(\?.*)?$/i,
// minRatio: 0.8
// }
// }
// },
chainWebpack: config => {
config
.resolve.alias
.set('@', resolve('src'))
config
.plugins.delete('prefetch')
config
.optimization.splitChunks()
config
.output
.chunkFilename('[id].js')
// The below configurations are recommeneded only in prod.
// config.when(process.env.NODE_ENV === 'production', config => { config... })
// Compress option VII
// config
// .plugin('gzip')
// .use(CompressionWebpackPlugin, [{
// algorithm: 'gzip',
// test: new RegExp('\\.(' + ['js', 'css'].join('|') + ')$'),
// threshold: 8192, // Assets larger than 8192 bytes are not processed
// minRatio: 0.8, // Assets compressing worse that this ratio are not processed
// }])
// Compress option VIII
// config
// .plugin('CompressionPlugin')
// .use(CompressionWebpackPlugin)
config
.plugin('brotliCompress')
.use(CompressionWebpackPlugin, [{
exclude: /.map$/,
// deleteOriginalAssets: true,
cache: true,
algorithm: 'brotliCompress',
test: /\.(js|css|html|svg)$/,
threshold: 10240,
minRatio: 0.8,
}])
},
}
package.json包.json
"dependencies": {
"@auth0/auth0-spa-js": "^1.15.0",
"audio-recorder-polyfill": "^0.4.1",
"compression-webpack-plugin": "^6.0.0",
"core-js": "^3.6.5",
"dotenv": "^8.2.0",
"dotenv-expand": "^5.1.0",
"moment": "^2.29.1",
"register-service-worker": "^1.7.1",
"uuid": "^3.4.0",
"vue": "^2.6.11",
"vue-loader": "^15.9.8",
"vue-router": "^3.5.1",
"vuex": "^3.6.2"
},
"devDependencies": {
"@vue/cli-plugin-babel": "~4.5.0",
"@vue/cli-plugin-eslint": "~4.5.0",
"@vue/cli-plugin-pwa": "~4.5.0",
"@vue/cli-service": "~4.5.0",
"babel-eslint": "^10.1.0",
"eslint": "^6.7.2",
"eslint-plugin-vue": "^6.2.2",
"vue-cli-plugin-compression": "~1.1.5",
"vue-template-compiler": "^2.6.11",
"webpack": "^4.46.0"
}
I appreciate all input.我感谢所有输入。 Thanks.谢谢。
It seems like the compression-webpack-plugin
only compresses files, but it doesn't automatically configure the dev server to serve the compressed files in place of the original file.似乎compression-webpack-plugin
只压缩文件,但它不会自动配置开发服务器以提供压缩文件来代替原始文件。
However, you can manually setup a middleware via vue.config.js
's devServer
option (passed through to webpack-dev-server
) to do this:但是,您可以通过vue.config.js
的devServer
选项(传递给webpack-dev-server
)手动设置中间件来执行此操作:
Rewrite all .js
requests that accept br
encoding to append .br
to the original URL, which matches the filename
setting given to compression-webpack-plugin
.重写所有接受br
编码的.js
请求,以将.br
附加到原始 URL,这与提供给compression-webpack-plugin
的filename
设置相匹配。 This effectively fetches the .br
file compressed by the plugin.这有效地获取插件压缩的.br
文件。
Set response headers to indicate the br
content encoding and application/javascript
content type so that browsers could understand how to process the file.设置响应标头以指示br
内容编码和application/javascript
内容类型,以便浏览器可以了解如何处理文件。
Use devServer.setupMiddlewares
:使用devServer.setupMiddlewares
:
// vue.config.js
const CompressionPlugin = require('compression-webpack-plugin')
module.exports = {
transpileDependencies: true,
configureWebpack: {
plugins: [
new CompressionPlugin({ 1️⃣
filename: '[path][base].br',
algorithm: 'brotliCompress',
test: /\.js$/,
})
]
},
devServer: {
setupMiddlewares(middlewares, devServer) {
if (!devServer) {
throw new Error('webpack-dev-server is not defined')
}
middlewares.unshift({
name: 'serve-brotli-js',
path: '*.js',
middleware: (req, res, next) => {
if (req.get('Accept-Encoding')?.includes('br')) {
1️⃣
req.url += '.br'
2️⃣
res.set('Content-Encoding', 'br')
res.set('Content-Type', 'application/javascript; charset=utf-8')
}
next()
}
})
return middlewares
}
}
}
Use devServer.before
:使用devServer.before
:
Note: The only difference from Webpack 5 is the Express app
is directly passed as the argument to devserver.before()
.注意:与 Webpack 5 的唯一区别是 Express app
直接作为参数传递给devserver.before()
。
// vue.config.js
⋮
module.exports = {
⋮
devServer: {
before(app) {
// same code as Webpack 5 above
}
}
}
It's not clear which server is serving up these assets.目前尚不清楚哪台服务器正在为这些资产提供服务。 If it's Express, looking at the screenshot with the header X-Powered-By
, https://github.com/expressjs/compression/issues/71 shows that Brotli support hasn't been added to Express yet.如果是 Express,请查看带有标题X-Powered-By
的屏幕截图, https://github.com/expressjs/compression/issues/71表明尚未将 Brotli 支持添加到 Express 中。
There might be a way to just specify the header for content-encoding
manually though.不过,可能有一种方法可以手动指定content-encoding
的标头。
Add these in your nginx.conf file,If the client supports gzip Parsing , So as long as the server can return gzip Can be enabled gzip在你的 nginx.conf 文件中添加这些,如果客户端支持 gzip 解析,那么只要服务端可以返回 gzip 就可以启用 gzip
gzip on; # Turn on Gzip
gzip_static on; # Turn on static file compression
gzip_min_length 1k; # Incompressible critical value , Greater than 1K It s only a matter of time
gzip_buffers 4 16k;
gzip_comp_level 5;
gzip_types application/javascript application/x-javascript application/xml application/xml+rss application/x-httpd-php text/plain text/javascript text/css image/jpeg image/gif image/png; # The type of file to be compressed
gzip_http_version 1.1;
gzip_vary on;
gzip_proxied expired no-cache no-store private auth;
gzip_disable "MSIE [1-6]\.";
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.