vue 打包优化，解决包大下载慢

如果你遇到vue打包后单个文件很大。网络传输严重影响了带宽。那你看这篇文章，应该是能帮到你的。本篇文章是实现文件Gz压缩实现。利用compression-webpack-plugin。具体看如下实现步骤

1、安装compression-webpack-plugin插件

npm install --save-dev compression-webpack-plugin

2、在vue.config.js 中引入依赖和相关配置

const CompressionPlugin = require('compression-webpack-plugin')

 

 

config.plugin('compressionPlugin').use(new CompressionPlugin({
  algorithm: 'gzip', // 使用gzip压缩
  test: /\.js$|\.html$|\.css$/, // 匹配文件名
  filename: '[path].gz[query]', // 压缩后的文件名(保持原文件名，后缀加.gz)
  minRatio: 1, // 压缩率小于1才会压缩
  threshold: 10240, // 对超过10k的数据压缩
  deleteOriginalAssets: false,
}))

增加如上两处代码。就可以实现代码压缩成gz文件。

本来app.js大小在30MB。现在大小完全降低很多。接下来配置nginx代理gz

3、nginx启用gzip压缩

在nginx http模块中增加如下配置

http{

#直接拷贝如下配置放到http模块中

 gzip on;

 # 开启静态gz文件返回
  gzip_static on;
  
  # 启用gzip压缩的最小文件，小于设置值的文件将不会压缩
  gzip_min_length 1k;
  
  # 设置压缩所需要的缓冲区大小     
  gzip_buffers 32 4k;

# 设置gzip压缩针对的HTTP协议版本
  gzip_http_version 1.0;

  # gzip 压缩级别，1-9，数字越大压缩的越好，也越占用CPU时间
  gzip_comp_level 7;

  # 进行压缩的文件类型。javascript有多种形式。其中的值可以在 mime.types 文件中找到。
  gzip_types text/plain application/javascript application/x-javascript text/css application/xml text/javascript application/x-httpd-php image/jpeg image/gif image/png application/vnd.ms-fontobject font/ttf font/opentype font/x-woff image/svg+xml;

  # 是否在http header中添加Vary: Accept-Encoding，建议开启
  gzip_vary on;

  # 禁用IE 6 gzip
  gzip_disable "MSIE [1-6]\.";

....

再去访问你的网站。你会发现，加载速度瞬间提升了。