introduce

Brotli is an open source compression algorithm launched by Google. It compresses data by means of LZ77 algorithm, Huffman coding and second-order text modeling, etc. Compared with other compression algorithms, it has higher compression efficiency and 17-25% higher performance than the current common Gzip. Can help us more efficient compression of various file sizes and scripts in the web page, thus improving the loading speed, improve the web browsing experience. It should be noted that Brotli compression only works in HTTPS, because in HTTP requests, accept-Encoding: gzip, deflate does not have BR.

Brotli’s high compression ratio is due to its use of a predefined dictionary that contains more than 13,000 commonly used strings from a large corpus of text and HTML documents. The predefined algorithm can increase the compression density of smaller files while the compression and decompression speed is roughly the same.

Brotli quickly captured the market with its excellent compression performance. As can be seen from the following figure, except for IE and Opera Mini, almost all major browsers already support Brotli algorithm. Therefore, considering resource occupation, such as traffic, it is recommended to enable Brotli algorithm:

Server configuration

The related resources used in this example are as follows

  • Operating system:Ubuntu 20.04
  • Nginx version:Nginx / 1.18.0

Installing and configuring Git

Before installing Git, check whether git is installed on the server. After installing and configuring Git, go to the next step. Install git:

sudo apt-get install git
Copy the code

Download Brotli

Google /ngx_brotli came with Google/Brotli built in from the December 2016 release, so we didn’t need to build the bagder/libbrotli library to make installation easier. We downloaded and unpacked Google /ngx_brotli into /usr/local/src/ngx_brotli

cd /usr/local/src
sudo git clone https://github.com/google/ngx_brotli.git || sudo git clone https://github.com.cnpmjs.org/google/ngx_brotli.git
Copy the code

Then download Google /brotli and unzip to /usr/local/src/ngx_brotli/deps/brotli

cd /usr/local/src/ngx_brotli/deps && rm -rf brotli
git clone https://github.com/google/brotli.git || sudo git clone https://github.com.cnpmjs.org/google/brotli.git
cd /usr/local/src/ngx_brotli && git submodule update --init
Copy the code

Download the unzip Nginx source package

Please download the same Nginx source package as the current version of Nginx. Nginx official download: nginx.org/en/download…

To obtain the current Nginx version, run the following command:

nginx -v
Copy the code

Output:

Nginx version: nginx / 1.18.0 (Ubuntu)Copy the code

Download and unzip the Nginx source package:

CD/usr/local/SRC sudo wget http://nginx.org/download/nginx-1.18.0.tar.gz sudo tar - XVF nginx - 1.18.0. Tar. GzCopy the code

Compiling dynamic modules

CD nginx-1.18.0 sudo./configure --with-compat --add-dynamic-module=/usr/local/ SRC /ngx_brotli sudo make modulesCopy the code

Parameter syntax: — add-dynamic-module=[absolute path to module source directory]

After running, check the compiled module:

ls objs/*.so
Copy the code

Output:

objs/ngx_http_brotli_filter_module.so  objs/ngx_http_brotli_static_module.so
Copy the code

Copy the compiled module files to the Nginx dynamic module loading directory:

sudo cp objs/{ngx_http_brotli_filter_module.so,ngx_http_brotli_static_module.so} /etc/nginx/modules
Copy the code

Register the Brotli module

Modify Nginx configuration file nginx.conf:

cd /etc/nginx
sudo vim nginx.conf
Copy the code

In the header you can add:

#Brotli module
load_module /etc/nginx/modules/ngx_http_brotli_filter_module.so;
load_module /etc/nginx/modules/ngx_http_brotli_static_module.so;
Copy the code

Start Brotli compression

Brotli and gzip can coexist, so there is no need to turn off gzip.

sudo vim nginx.conf
Copy the code
http{ ... ## # Gzip Settings ## gzip on; gzip_static on; gzip_disable "MSIE [1-6]\."; gzip_min_length 1k; gzip_vary on; gzip_comp_level 3; gzip_types text/plain text/css text/javascript application/javascript text/xml application/xml application/xml+rss application/json image/jpeg image/gif image/png; ## # Brotli Settings ## brotli on; brotli_static on; brotli_comp_level 6; brotli_buffers 16 8k; brotli_min_length 20; brotli_types text/plain text/css text/javascript application/javascript text/xml application/xml application/xml+rss application/json image/jpeg image/gif image/png; . }Copy the code

Verify that Nginx configuration is correct and restart Nginx:

sudo nginx -t
sudo systemctl reload nginx
Copy the code

Cleaning up temporary files

To make it a good habit, delete the files or directories extracted from the application package after each compilation.

Rm - rf/usr/local/SRC / {nginx 1.18.0 / ngx_brotli /}Copy the code

The front-end configuration

Vue – cli configuration

Modify vue.confi.js file:

const CompressionWebpackPlugin = require('compression-webpack-plugin') // Compression plug-in
 
configureWebpack: config= > {
    const plugins = [
      ......
      / / gzip compression
      new CompressionWebpackPlugin({
        filename: '[path][base].gz'.algorithm: 'gzip'.test: new RegExp(
          '\ \. (' +
          ['js'.'css'].join('|') +
          '$'
        ),
        threshold: 10240.minRatio: 0.8
      }),
      / / brotli compression
      new CompressionWebpackPlugin({
        filename: '[path][base].br'.algorithm: 'brotliCompress'.test: /\.(js|css|html|svg)$/,
        threshold: 10240.minRatio: 0.8})]if (process.env.NODE_ENV === 'production') {
      config.plugins = [...config.plugins, ...plugins]
    }
  },
Copy the code

Configuration in vite

Modify the vite. Config. ts file

import viteCompression from 'vite-plugin-compression' // Compression plug-in

  / / the plugin
  plugins: [.../ / gzip compression
    viteCompression({
      verbose: true.disable: false.threshold: 10240.algorithm: 'gzip'.ext: '.gz'
    }),
    / / brotli compression
    viteCompression({
      verbose: true.disable: false.threshold: 10240.algorithm: 'brotliCompress'.ext: '.br'})].Copy the code

Verify that compression works

The curl validation

curl -H 'Accept-Encoding: br' -I http://localhost
Copy the code
HTTP/1.1 200 OK
Server: nginx/1.18.0 (Ubuntu)
Date: Mon, 24 May 2021 14:38:29 GMT
Content-Type: text/html
Last-Modified: Tue, 21 Apr 2020 14:09:01 GMT
Connection: keep-alive
Vary: Accept-Encoding
ETag: W/"5e9efe7d-264"
Content-Encoding: br
Copy the code

Browser-side authentication

Not open:

Has been open

reference

  1. Nginx enables Brotli compression
  2. Nginx enables the Brotli compression algorithm for sites
  3. Gzip, Zopfli and Brotli compression comparison, VUE configuration and server implementation
  4. Nginx enables Google Brotli compression
  5. How to install Brotli Module for Nginx on Ubuntu 20.04
  6. compression-webpack-plugin
  7. vite-plugin-compression