Shulou(Shulou.com)06/01 Report--

This article mainly explains "Nginx dynamic compression and static compression how to achieve", interested friends may wish to take a look. The method introduced in this paper is simple, fast and practical. Next let the editor to take you to learn "Nginx dynamic compression and static compression how to achieve"!

There are two ways to configure gzip compression at the front end in Nginx:

Nginx dynamic compression, static files or ordinary files, compress again when the request comes, and then return to the front end. Nginx static compression, compress the file into .gz format in advance. If the request comes, you can return it directly. 2.2.1 Nginx dynamic compression

Dynamically compress Vue or use ordinary packaged compiled files, copy the packaged files compiled from the front end to the html directory of Nginx, and then access nginx: http://192.168.91.129

After ensuring that nginx is running successfully, configure nginx next:

Gzip on; # enable gzip

Gzip_min_length 2kbot # over 2kb to compress

Gzip_disable msie6; # ie6 does not apply to gzip

Gzip_types text/css application/javascript text/javascript image/jpeg image/png image/gif; # Files to be processed

After the configuration is complete, restart Nginx:

. / nginx-s reload

After the startup is successful, you can see the compression effect by visiting the front-end page.

2.2.2 Nginx static compression

There is a problem with the above dynamic compression, that is, it has to be compressed every time you request a response, in fact, it is all the same file, and always compression is a bit of a waste of resources.

We can compress the file in advance, save it on the server, and return it directly when we need it, which will be much more convenient.

This requires us to first install the compression plug-in on the front end:

Npm install compression-webpack-plugin-D

After the installation is successful, configure it in vue.config.js:

Const CompressionPlugin = require ("compression-webpack-plugin")

Module.exports = {

DevServer: {

Host: 'localhost'

Port: 8080

Proxy: proxyObj

}

ConfigureWebpack: config = > {

If (process.env.NODE_ENV = = 'production') {

Return {

Plugins: [

New CompressionPlugin ({

Test: /\ .js $|\ .html $|\ .css /

Threshold: 1024

DeleteOriginalAssets: false

})

]

}

}

}

}

Threshold means that files that exceed 1kb will be compressed. DeleteOriginalAssets indicates whether to delete the original file after compression.

Once the configuration is complete, execute the packaging command vue-cli-service build again. After this package is completed, we can see the .gz file in the js directory, as follows:

Next, upload the file to the Nginx server, and then recompile and package the Nginx. If you want Nginx to return compressed files, you need to use the http_gzip_static_module module in Nginx, which can send pre-compressed files with .gz as the file extension, so we need to recompile and package Nginx:

. / configure-- with-http_gzip_static_module

Make

Make install

Then open gzip_static in the Nginx configuration file as follows:

Gzip_static on

Note that when gzip_static is enabled, gzip_types becomes invalid, so there is no need to configure this property.

After the configuration is complete, restart Nginx, visit again, and check the browser log, you will find that gzip has taken effect.

"attention."

Gzip compressed files returned by static compression are prepared in advance, and files without .gz format are automatically returned to the original file. This is a different response strategy from dynamic compression. Dynamic compression is based on the configuration in Nginx, which is automatically compressed when the size is exceeded.

At this point, I believe that "Nginx dynamic compression and static compression how to achieve" have a deeper understanding, might as well to the actual operation of it! Here is the website, more related content can enter the relevant channels to inquire, follow us, continue to learn!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.