Vue projects, front-end packaged post-chunk-vendors files are too large, resulting in slow loading.

Solution, performance optimization processing:

1. Use webPack’s compressionPlugin in the ue. Config. js file

2. Enable gZIP optimization on nginx

steps

1. Use webPack’s compressionPlugin in the ue. Config. js file

Install compressionPlugin

npm i -D compression-webpack-plugin
Copy the code

Tip:

The installation fails

An errorTypeError: Cannot read property 'tapPromise' of undefinedCause: The compression-webpack-plugin version is faultyCopy the code

Handling method:

Run the uninstallation command first

npm uninstall compression-webpack-plugin
Copy the code

Running installation Commands

npm i compression-webpack-plugin@5.01.
Copy the code

In vue.config.js file:

The introduction of the plugin

const CompressionPlugin = require("compression-webpack-plugin")
Copy the code

Compression configuration

if (process.env.NODE_ENV === 'production') {
  config.plugin('compressionPlugin').use(
  new CompressionPlugin({
    filename: '[path].gz[query]'.// The compressed file name (keep the original file name and add.gz)
    algorithm: 'gzip'.// Use gzip compression
    test: new RegExp('\. (' + ['js'.'css'].join('|') + '$'), // Match the file name
    threshold: 10240.// Compress data over 10K
    minRatio: 0.8 // The compression ratio is less than 0.8}}))Copy the code

2. Open gzip Nginx

File path:

Nginx installation directory -> conf ->nginx.conf

nginx.confAdd the following gzip configuration to the file

 http {   
   gzip on; 
   gzip_static on;
   gzip_buffers 4 16k;
   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; }Copy the code

The nginx.conf file is modified and passednginx -s reloadRestart the service