The packaging volume of the project is large, and the loading time of the first screen of the page is too long, resulting in a white screen. Therefore, the ultimate purpose of performance optimization is to improve the user experience.

1,BundleAnalyzer

Function: display the packaging graphical information, open an html page to help you analyze which files are too large, optimize them, and comment them out before going online

	// Install the webpack bundle analyzer plug-in 
	npm install webpack-bundle-analyzer -D
	
	// In Vue config. JS: Inside:
	// introduce
	const BundleAnalyzerPlugin = require("webpack-bundle-analyzer").BundleAnalyzerPlugin;
	// Display graphical information
	chainWebpack: config => {
	  config
	      .plugin('webpack-bundle-analyzer')
	      .use(BundleAnalyzerPlugin)
	}

	// see
	npm run build --report

2. Troubleshoot and remove redundant dependencies and static resources

• Remove project template redundancy dependency
• Move public static resources into assets. Static resources should be placed under assets. Public will only be simply copied to dist. files that are not processed by webpack should be placed, such as libraries that are incompatible with webpack, files that need to specify file names, etc

3. Compress CSS (Mini CSS extract plugin)

	// Install the mini CSS extract plugin
	npm install mini-css-extract-plugin -D
	
	// In Vue config. JS:
	chainWebpack: config => {
	  let miniCssExtractPlugin = new MiniCssExtractPlugin({
	    filename: 'assets/[name].[hash:8].css',
	    chunkFilename: 'assets/[name].[hash:8].css'
	  })
	  config.plugin('extract-css').use(miniCssExtractPlugin)
	}
	// In module Add under exports, otherwise an error will be reported during the packaging process. There is no module CssDependency available for dependency types
	css: {
	    extract: false
	}

4. Compressed image at build time (image webpack loader)

• If the download of imagemin library fails during install or build, you can try to change the source, configure github hosts, and add – user=root during install. I successfully installed using cnpm
• When uninstalling the plug-in, note that it conflicts with the Gzip compression transmission uninstallation below. After uninstallation, the compression webpack plugin plug-in cannot be used

	// Please check the above two points before installing install 
	npm i image-webpack-loader -D
	// vue.config.js
	chainWebpack: (config) => {
	    if (isProd) {
	        // Image compression processing
	        const imgRule = config.module.rule('images')
	        imgRule
	            .test(/\.(png|jpe?g|gif|webp)(\?.*)?$/)
	            .use('image-webpack-loader')
	            .loader('image-webpack-loader')
	            .options({ bypassOnDebug: true })
	            .end()
	    }
	}

5. js compression (uglifyjs webpack plugin)

// Install uglifyjs webpack plugin
npm install uglifyjs-webpack-plugin -D

// In Vue config. JS inside
 config.plugin('uglifyjs-plugin').use('uglifyjs-webpack-plugin', [
        {
          uglifyOptions: {
            warnings: false,
            // Automatically delete console in production environment
            compress: {
              dead_code: true, // Remove unreferenced code
              drop_debugger: true, // Remove debugger
              drop_console: true, // Remove console function
              pure_funcs: ['console.log']
            }
          },
          sourceMap: false,
          cache: false, // Whether to enable file caching. The default cache path is node_modules/.cache/uglifyjs-webpack-plugin.
          parallel: true // Use multiple processes running in parallel to improve build speed
        }
 ])

6. Gzip compression webpack plugin

Gzip compression is a powerful compression method, which can usually reduce the volume of text files by 2 / 3.

Nginx configuring Gzip

#Turn gzip mode on and off
gzip on;
#gizp compression starting point. Only when the file is greater than 1k can it be compressed
gzip_min_length 1k;
# gzip compression level, 1-9. The larger the number, the better the compression and the more CPU time it takes
gzip_comp_level 6;
# The type of file to compress.
gzip_types text/plain application/javascript application/x-javascript text/css application/xml text/javascript ;
# nginx for static file processing module, after opening, will look for gz end files are returned directly and will not occupy cpu for compression. If they are not found, they will not be compressed
gzip_static on;
# Whether to add vary: accept encoding in http header. It is recommended to enable it
gzip_vary on;
# Set the HTTP protocol version for gzip compression
gzip_http_version 1.1;

Generate gzip files at build time
After the above configuration, Nginx will compress and return gzip when responding to the request, but the compression operation itself will occupy the CPU and time of the server. The higher the compression level, the greater the overhead. Therefore, we usually upload gzip files together and let the server directly return the compressed files

• Do not use the latest version. Using the latest version will report an error
• The default compression level of the plug-in is 9, the highest compression level
• gzip compression is not recommended for image files, and the effect is poor

	// Install the compression webpack plugin (do not use the latest version)
	npm i compression-webpack-plugin@6.1.1 -D
	
	// vue.config.js
	const CompressionPlugin = require('compression-webpack-plugin')
	// gzip compression processing
	chainWebpack: (config) => {
	    if(isProd) {
	        config.plugin('compression-webpack-plugin')
	            .use(new CompressionPlugin({
	                test: /\.js$|\.html$|\.css$/, // Match file name
	                threshold: 10240, // Data compression over 10k
	                deleteOriginalAssets: false // Do not delete source files
	            }))
	    }
	}