vue 访问首页白屏优化 -- 【开启gizp】

vue.config.js 开启js\css压缩

module.exports = {
  chainWebpack: (config) => {
    ...
    // 生产环境，开启js\css压缩
    if (process.env.NODE_ENV === 'production') {
        config.plugin('compressionPlugin').use(new CompressionPlugin({
            test: /\.(js|css|less|gz)$/, // 匹配文件名
            threshold: 10240, // 对超过10k的数据压缩
            minRatio: 0.8,
            deleteOriginalAssets: true // 删除源文件 -- 减小包大小
        }))
     }
    ...
  }
}

打包文件显示：

微信图片_20211223162515.png

nginx.config 配置开启gzip。经费有限 ~~~

# 开启gzip
gzip on;
# gzip_static是nginx对于静态文件的处理模块，可以读取预先压缩的gz文件，多与构建时压缩同时使用
gzip_static on;
# 通知静态文件服务器客户端能够理解的gzip压缩文件，使其返回.gz文件。
# 反向代理服务器应该添加请求头proxy_set_header Accept-Encoding ‘gzip’
gzip_http_version 1.1;
# gzip 压缩级别 1-10 
gzip_comp_level 9;
# 进行压缩的文件类型。
gzip_types text/plain text/javascript application/javascript image/jpeg image/gif image/png application/font-woff application/x-javascript text/css application/xml;
# 是否在http header中添加Vary: Accept-Encoding，建议开启
gzip_vary on;

将打包文件复制到nginx下的html中

微信图片_20211223163539.png

js访问请求，gzip开启成功

微信图片_20211223163543.png