网页优化-gzip压缩&清除console

网页优化链接

gzip压缩

开启gzip压缩能够有效的缩小传输资源的大小，如果你的项目是用nginx作为web服务器的话，只需在nginx的配置文件中配置相应的gzip选项就可以让你的静态资源服务器开启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;

利用compression-webpack-plugin: 生产环境输出.gz后缀的压缩文件

利用 terser-webpack-plugin: 生产环境清楚console和debugger

const CompressionWebpackPlugin = require("compression-webpack-plugin")

module.exports = {
    ...
    chainWebpack: (config) => {
	if (IS_PRODUCTION) {
        /** 注意：gzip需要nginx进行配合*/
        config.plugin("compression")
              .use(CompressionWebpackPlugin)
              .tap(() => [
		{
                    test: /\.js$|\.html$|\.css/, //匹配文件名
                    threshold: 10240, //超过10k进行压缩
                    deleteOriginalAssets: false //是否删除源文件
		}
               ]);
		
	config.optimization.minimizer("terser").tap(args => {	
		args[0].terserOptions.warnings = false;
		args[0].terserOptions.compress.drop_console = true;
		args[0].terserOptions.compress.drop_debugger=true;
                return args;
            });
	}
    }
    ...
}