Nginx static compression and code compression practice greatly improve website access speed!

Original text: juejin.cn/post/7101663374957608974

Based on most of the current applications, the front-end and back-end separation frameworks are used, and the front-end applications of Vue are also very popular. I don't know if you have encountered such a problem:

With the pages of the front-end framework, function development continues to iterate; installation dependencies continue to increase;

The problem caused by this is that our front-end framework will become very large, and the packaged dist directory will become very large! ! !

This will lead to a problem: accessing the application for the first time will become very slow! ! !

This is indeed a serious problem! ! ! T_T

Regarding this problem, we will conduct research and solve it from two aspects today: code compression + nginx static resource compression! ! !

Dynamic compression of nginx static resources

• nginx enables gzip compression

server {
        listen       80;
        listen  [::]:80;
        server_name  localhost;
        server_tokens off;

        # 开启gzip压缩
        gzip on;
        gzip_disable "msie6";
        gzip_vary on;
        gzip_proxied any;
        gzip_comp_level 6;
        gzip_buffers 16 8k;
        gzip_http_version 1.1;
        gzip_types text/plain application/css text/css application/xml text/javascript application/javascript application/x-javascript;

        #llsydn 前端
        location /jxbp {
             alias  /opt/llsydn/jxbp;
             index index.html;
             try_files $uri $uri/ /dist/index.html;
        }
 }

Then restart nginx:nginx -s reload

See if it works! ! !

• Compressed renderings

• Effect picture without compression

As can be seen from the above two pictures:

• The first one is compressed: finish time is 2.36s, transferred is 7.6MB
• The second one is not compressed: finish time is 6.32s, transferred is 24.6MB

Obviously, after the static resource compression of nginx, the access speed has improved, significantly! ! !

Seeing this, we will have such a problem. This compression is all done by nginx. When the number of visits increases, the pressure on nginx is very large. After all, it is dynamically compressed! ! !

Is there any solution?

The principle of dynamic compression of nginx static resources is nothing more than helping us compress js, css and other files into a .gz file, and then transmit it to the front-end browser for analysis. Speaking of this, we can't help but say: Let's first generate the corresponding .gz files from js, css and other files, so there is no need for nginx dynamic compression? It seems to be the case! ! !

Genius! ! !

nginx static resource static compression

• Generate corresponding .gz files from js, css and other files

This can be handled with some dependencies:compression-webpack-plugin

Installation dependencies:

npm install compression-webpack-plugin -D

• view.config.js

const CompressionWebpackPlugin = require('compression-webpack-plugin')
const productionGzipExtensions = ['js', 'css']
vueConfig.configureWebpack.plugins.push(new CompressionWebpackPlugin({
    test:/.js$|.html$|.\css/, // 匹配文件名
    threshold: 1024, // 对超过1k的数据压缩
    deleteOriginalAssets: false // 不删除源文件
}))

Pack:

npm run build

As you can see, the corresponding .gz file has been generated for us! ! !

• nginx configuration

Based on the above, plus

gzip_static on

• nginx has to install the following modules:

ngx_http_gzip_module模块
ngx_http_gzip_static_module模块
ngx_http_gunzip_module模块

• nginx enables gzip compression

server {
        listen       80;
        listen  [::]:80;
        server_name  localhost;
        server_tokens off;

        # 开启gzip压缩
        gzip on;
        gzip_static on
        gzip_disable "msie6";
        gzip_vary on;
        gzip_proxied any;
        gzip_comp_level 6;
        gzip_buffers 16 8k;
        gzip_http_version 1.1;
        gzip_types text/plain application/css text/css application/xml text/javascript application/javascript application/x-javascript;

        #llsydn 前端
        location /jxbp {
             alias  /opt/llsydn/jxbp;
             index index.html;
             try_files $uri $uri/ /dist/index.html;
        }
 }

Then restart nginx:nginx -s reload

See if it works! ! !

• static compression

• dynamic compression

Well, the static compression of nginx is here! ! !

Recent hot article recommendation:

1. 1,000+ Java interview questions and answers (2022 latest version)

2. Brilliant! Java coroutines are coming. . .

3. Spring Boot 2.x tutorial, too comprehensive!

4. Don't fill the screen with explosions and explosions, try the decorator mode, this is the elegant way! !

5. The latest release of "Java Development Manual (Songshan Edition)", download quickly!

Feel good, don't forget to like + forward!