The 
No errors show in my browser or IDE when running locally.
WHAT I TRIED
- Using different implementations for the compression plugin. See below list of approaches:
- (With Webpack Chain API)
config
.plugin('brotliCompress')
.use(CompressionWebpackPlugin, [{
exclude: /.map$/,
cache: true,
algorithm: 'brotliCompress',
test: /\.(js|css|html|svg)$/,
threshold: 10240,
minRatio: 0.8,
}])
- (With Webpack Chain API)
config
.plugin('gzip')
.use(CompressionWebpackPlugin, [{
algorithm: 'gzip',
test: new RegExp('\\.(' ['js', 'css'].join('|') ')$'),
threshold: 8192,
minRatio: 0.8,
}])
- (With Webpack Chain API)
config
.plugin('CompressionPlugin')
.use(CompressionWebpackPlugin)
- (Using vue-cli-plugin: compression) This fails due to a Missing generator error when I use
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.
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
}
}
},
- Lastly, I tried setting the threshold field to 0 as well as raising it larger than 10k bytes.
POINTS OF SIGNIFICANCE
- The above attempts didn't achieve the goal I stated in the first summary bullet and were used in place of the previous approaches tested.
- I prioritized my efforts with Webpack Chain API since it resulted in no errors when rebuilding and running the app.
REFERENCED LINKS/DOCS
CODE
vue.config.js
const path = require('path')
const CompressionWebpackPlugin = require('compression-webpack-plugin')
function resolve (dir) {
return path.join(__dirname, dir)
}
module.exports = {
chainWebpack: config => {
config
.resolve.alias
.set('@', resolve('src'))
config
.plugins.delete('prefetch')
config
.optimization.splitChunks()
config
.output
.chunkFilename('[id].js')
config
.plugin('brotliCompress')
.use(CompressionWebpackPlugin, [{
exclude: /.map$/,
cache: true,
algorithm: 'brotliCompress',
test: /\.(js|css|html|svg)$/,
threshold: 10240,
minRatio: 0.8,
}])
},
}
package.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.
CodePudding user response：
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.
There might be a way to just specify the header for content-encoding manually though.
CodePudding user response：
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.
However, you can manually setup a middleware via vue.config.js's devServer option (passed through to webpack-dev-server) to do this:
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. This effectively fetches the .br file compressed by the plugin.
Set response headers to indicate the br content encoding and application/javascript content type so that browsers could understand how to process the file.
Vue CLI 5 (Webpack 5)
Use devServer.onBeforeSetupMiddleware:
const CompressionPlugin = require("compression-webpack-plugin")
module.exports = {
transpileDependencies: true,
configureWebpack: {
plugins: [
new CompressionPlugin({ 1️⃣
filename: "[path][base].br",
algorithm: "brotliCompress",
test: /\.js$/,
})
]
},
devServer: {
onBeforeSetupMiddleware({ app }) {
app.use('*.js', (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()
})
}
}
}
Vue CLI 4 (Webpack 4)
Use devServer.before:
Note: The only difference from Vue CLI 5 is the Express app is directly passed as the argument to devserver.before().
⋮
module.exports = {
⋮
devServer: {
before(app) {
}
}
}
GitHub demo
