The plugin “compression-webpack-plugin” can further compress the front-packaged resource files through the compression algorithm to generate the specified compressed files of smaller size, enabling the browser to load resources faster.

A TypeError (Vue.config.js) may be encountered during packaging. Cannot read property ‘tAppromise’ of undefined “. This is because the version of “compression-webpack-plugin” installed is too high. This can be solved by installing a lower version (CNPM i-d [email protected]). The “Filename” configuration item must be explicitly specified, otherwise there will be a difference in the location of the generated zip file in the 2.x and 3.x projects created by the Vue CLI.

const CompressionWebpackPlugin = require('compression-webpack-plugin'); module.exports = { productionSourceMap: false, configureWebpack: config => { config.plugins.push(new CompressionWebpackPlugin({ filename: '[path][name].gz', test: /\.(js|css)$/i })); }}

After “NPM run build”, you can see that many “.gz “files have been generated, which are compressed.

The server configuration generates compressed files, which can not be used directly. Only the server configuration can be used, and it is found that the “dist/index.html” homepage generated by the packaging does not directly refer to these “.gz “files. The key is to let the server send the response header “Content-Encoding=gzip” to the browser and send the corresponding “.gz “format file to the browser, so that the browser can parse the resource through the” gzip “Encoding format.

  1. The NodeJS implementation throws the packaged file into the NodeJS service environment and executes the following code.

    const path = require('path'); const fs = require('fs'); const express = require('express'); const app = express(); app.use((request, response, next) => { const fullPath = path.join(__dirname, `${request.originalUrl}.gz`); If (fs.existsSync(fullPath)) {// If it exists, tell the browser to parse it in gzip format and send the corresponding ".gz "format to the browser. response.setHeader('Content-Encoding', 'gzip') response.sendFile(fullPath); } else { next() } }) app.use(express.static('./')); App. listen(1055, _ => {console.log('1055 server started '); });

    By visiting “http://localhost:1055/”, you can see that the browser is already able to read the “.gz “files, even if the uncompressed files are removed from the package.

  2. The nginx implementation (nginx.conf) simply configulates “gzip_static on” within the HTTP module.

    http {
 gzip_static on;
}

This is a NodeJS compression middleware that provides the same functionality as the “compression-webpack-plugin”, so if you are developing a NodeJS service and using this library, There is no need for the front-end to use the “compression-webpack-plugin”.

· The above content is briefly written by referring to relevant information and personal understanding. For more detailed configuration, please refer to the official document. If there is any error, please feel free to correct it. The resources, compression-webpack-plugin:https://www.npmjs.com/package… compression:https://www.npmjs.com/package…