I recently built an open source project for Vite 2.0 + Vue 3.2.*. Note the optimization of native code packaging and compression in this project

What is a gzip

Gzip is a file format and software application used on Unix and UniX-like systems to compress HTTP content before it is served to clients. This process is known to shrink files by up to 80%, resulting in shorter page load times, reduced bandwidth consumption, and reduced SSL overhead due to fewer roundtrips during SSL handshakes.

The file types associated with gZIP include:

Gz – Indicates the file extension compressed by the gzip algorithm. Tar file, tarball – a format used to store multiple files for archiving but not for compression. Gzip can be used to compress.tar files. TGZ,.tar.gz, and. Gz files – Indicates the. Tar files compressed by gzip.

Why optimize

While shrinking before a Gzip file might seem redundant, it turns out that it can reduce the tarfile size by an additional 5-10%. Because CDN performs shrinking and gzip compression, they minimize the size of the code file delivered to the user, resulting in a significant reduction in page load time.

How to optimize

1. Front-end code configuration

Here I refer to the Viet-plugin-Compression plug-in in the Vue-vben-admin project of the Vite community. Interested friends can go to support, here I just show a simple section of configuration code

import compressPlugin from "vite-plugin-compression";

export function configCompressPlugin(
  compress: "gzip" | "brotli" | "none",
  deleteOriginFile = false
) :Plugin | Plugin[] {
  const compressList = compress.split(",");

  const plugins: Plugin[] = [];

  if (compressList.includes("gzip")) {
    plugins.push(
      compressPlugin({
        ext: ".gz",
        deleteOriginFile
      })
    );
  }
  if (compressList.includes("brotli")) {
    plugins.push(
      compressPlugin({
        ext: ".br".algorithm: "brotliCompress",
        deleteOriginFile
      })
    );
  }
  return plugins;
}
Copy the code

Note: This is a configuration item belonging to Vite. Please refer to the official documentation for the usage of Vite

Code compression

Run NPM run buildIt is about 500K before compression and has been reduced by twice as much volume after gzip compression

Server Configuration

Deploying to Nginx directly after configuring the Vue part will not take effect. You must also enable the Gzip function of Nginx to do so. Use nginx-1.20.1 as an example. First, you need to check whether the current nginx has it

The GZIP module is generally installed by default. Run the commandnginx -V Check to see if there are gZIP related modules in the returned resultngx_http_gzip_static_moduleFor details, please go toNgxin websiteCheck theIf it’s not running./configure --with- Specifies the name of the module to installThe command

Run the make command after the command is successfully executed. Do not run make install! Making install overwrites the previously installed nginx. After the make command is executed successfully, an nginx executable file will be generated in the objs directory. You can replace the original nginx with this nginx. After confirming that the module is installed, modify the conf/nginx.conf file and add the following content

Gzip on; Gzip_static on; #gzip buffers 4 16k; Gzip HTTP version gzip_http_version 1.1; Gzip_comp_level 5; Gzip_types text/plain Application /javascript text/ CSS application/ XML text/javascript application/x-httpd-php  image/jpeg image/gif image/png; Gzip_vary on is recommended for HTTP header Vary: accept-encoding.Copy the code

Then restart the nginx server and it will open normally

Nginx exceptions encountered during configuration

Failed to load module script: Expected a JavaScript module script but the server responded with a MIME type of "text/html". Strict MIME type checking is enforced for module scripts per HTML spec.

The nginx configuration does not read the above information. Check if the HTTP configuration is correct