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

最新推荐文章于 2024-07-17 14:53:56 发布

王威振的csdn

最新推荐文章于 2024-07-17 14:53:56 发布

阅读量1.9k

点赞数 1

文章标签： vue.js javascript webpack

本文链接：https://blog.csdn.net/saygood999/article/details/129946777

版权

文章介绍了如何通过安装和配置compression-webpack-plugin插件，对Vue项目的打包文件进行gzip压缩，从而减小文件大小，提高网络传输效率。之后，文章提到在nginx服务器上启用gzip压缩，调整相关配置以进一步提升网站的加载速度。

摘要由CSDN通过智能技术生成

如果你遇到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]\.";

....

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