性能优化加载遇坑记-CFANZ编程社区

项目打包体积大，页面首屏加载时间过长，导致页面白屏。因此进行性能优化，性能优化的最终目的是提升用户体验。

1、BundleAnalyzer

作用：展示打包图形化信息，会打开一个html页面，帮助自己分析哪些文件过大，可针对其进行优化，上线前注释掉

	// 安装 webpack-bundle-analyzer 插件 
	npm install webpack-bundle-analyzer -D
	
	// 在 vue.config.js: 里面：
	// 引入
	const BundleAnalyzerPlugin = require("webpack-bundle-analyzer").BundleAnalyzerPlugin;
	// 展示图形化信息
	chainWebpack: config => {
	  config
	      .plugin('webpack-bundle-analyzer')
	      .use(BundleAnalyzerPlugin)
	}

	// 查看
	npm run build --report

2、排查并移除冗余依赖、静态资源

移除项目模板冗余依赖
将public的静态资源移入assets。静态资源应该放在assets下，public只会单纯的复制到dist，应该放置不经webpack处理的文件，比如不兼容webpack的库，需要指定文件名的文件等

3、压缩CSS(mini-css-extract-plugin)

	// 安装 mini-css-extract-plugin 插件
	npm install mini-css-extract-plugin -D
	
	// 在 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)
	}
	// 在module.exports下添加，否则在打包过程出现 报错没有可用于依赖类型的模块 CssDependency
	css: {
	    extract: false
	}

4、构建时压缩图片(image-webpack-loader)

install或build时如果出现imagemin库下载失败，可以尝试换源、配置github hosts、install时添加–user=root解决。本人使用cnpm安装成功
卸载插件时注意，与下面Gzip压缩传输卸载冲突，卸载之后compression-webpack-plugin插件不能使用

	// 安装前请先查看上面的两点 install 
	npm i image-webpack-loader -D
	// vue.config.js
	chainWebpack: (config) => {
	    if (isProd) {
	        // 图片压缩处理
	        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压缩（uglifyjs-webpack-plugin）

// 安装 uglifyjs-webpack-plugin 插件
npm install uglifyjs-webpack-plugin -D

// 在 vue.config.js里面
 config.plugin('uglifyjs-plugin').use('uglifyjs-webpack-plugin', [
        {
          uglifyOptions: {
            warnings: false,
            // 生产环境自动删除console
            compress: {
              dead_code: true, // 移除没被引用的代码
              drop_debugger: true, // 移除 debugger
              drop_console: true, // 移除console函数
              pure_funcs: ['console.log']
            }
          },
          sourceMap: false,
          cache: false, // 是否启用文件缓存,默认的缓存路径为： node_modules/.cache/uglifyjs-webpack-plugin.
          parallel: true // 使用多进程并行运行来提高构建速度
        }
 ])

6、Gzip压缩传输（compression-webpack-plugin）

Gzip压缩是一种强力压缩手段，针对文本文件时通常能减少2/3的体积。

Nginx配置Gzip

#开启和关闭gzip模式
gzip on;
#gizp压缩起点，文件大于1k才进行压缩
gzip_min_length 1k;
# gzip 压缩级别，1-9，数字越大压缩的越好，也越占用CPU时间
gzip_comp_level 6;
# 进行压缩的文件类型。
gzip_types text/plain application/javascript application/x-javascript text/css application/xml text/javascript ;
# nginx对于静态文件的处理模块，开启后会寻找以.gz结尾的文件，直接返回，不会占用cpu进行压缩，如果找不到则不进行压缩
gzip_static on;
# 是否在http header中添加Vary: Accept-Encoding，建议开启
gzip_vary on;
# 设置gzip压缩针对的HTTP协议版本
gzip_http_version 1.1;

构建时生成gzip文件
虽然上面配置后Nginx已经会在响应请求时进行压缩并返回Gzip了，但是压缩操作本身是会占用服务器的CPU和时间的，压缩等级越高开销越大，所以我们通常会一并上传gzip文件，让服务器直接返回压缩后文件

不要使用最新版本，使用最新版本会报错
插件的默认压缩等级是9，最高级的压缩
图片文件不建议使用gzip压缩，效果较差

	// 安装 compression-webpack-plugin 插件 （不要使用最新版本）
	npm i compression-webpack-plugin@6.1.1 -D
	
	// vue.config.js
	const CompressionPlugin = require('compression-webpack-plugin')
	// gzip压缩处理
	chainWebpack: (config) => {
	    if(isProd) {
	        config.plugin('compression-webpack-plugin')
	            .use(new CompressionPlugin({
	                test: /\.js$|\.html$|\.css$/, // 匹配文件名
	                threshold: 10240, // 对超过10k的数据压缩
	                deleteOriginalAssets: false // 不删除源文件
	            }))
	    }
	}