压缩打包你的Vue项目,让访问提速
By: Date: 2023年6月22日 Categories: 程序 标签:, ,

前面我们说过Vue前端项目的优化,主要目的是让我们的应用能够运行的更快,其中有提到http压缩,让浏览器能够更快的下载传输数据。我们Vue+ElementUI的项目打包后最大的文件900K,在内网环境下,这个http压缩下载还真是感知不大,因为我们这900Kb的数据对内网环境来说就是涓涓小溪。而对于外网环境,大部分自己购买云主机的人来说,带宽就显得弥足珍贵,1M带宽的理论速度是128K,实际上我们下载这不到1M的脚本文件,需要近10秒的时间。这在外网打开个系统真能体会到一个字,巨慢无比!

当然了,现在的前端框架和技术已经很强大了,对于平常绝大多数的场景,都已经有了成熟的解决方案。为了解决上述传输慢的问题,这里我们通过使用webpack的压缩插件,将Vue项目在构建的时候对大文件进行gzip压缩,使得几百K的脚本文件体积被大大减小,来直接减少http的传输成本。假设我们的文件能够压缩到原文件的三分之一大小,900K的文件被压缩成300K,即原本需要8-9秒响应时间下载的文件,2-3秒即可下载,这样的优化就显得极其可观了。


1. 安装插件compression-webpack-plugin

这里我们主要借助compression-webpack-plugin插件来对构建出的文件进行压缩
yarn add compression-webpack-plugin@6.1.1 -D

这里我指定安装 6.1.1的版本,因为我的node版本比较低,默认安装是会安装最新版,可能会出现脚手架还不支持这个版本的兼容性问题,如:

TypeError: Cannot read property 'tapPromise' of undefined

当然了,你可能会尝试修改设置忽略错误来继续安装
yarn config set ignore-engines true
但这样做,并不一定能避免版本上的兼容性问题。

所以我们从最新的12.* 降到了6.1.1,安装一个较老的版本。


2. 配置webpack插件compression-webpack-plugin

安装插件后,我们需要在项目中对webpack的插件进行配置,在vue.config.vue 文件增加如下配置:

const CompressionPlugin = require('compression-webpack-plugin');
module.exports = {
    configureWebpack:{
        plugins: [
            new CompressionPlugin({
                algorithm: 'gzip', // 使用gzip压缩
                test: /\.js$|\.html$|\.css$/, // 匹配文件名
                minRatio: 1, // 压缩率小于1,才会压缩
                threshold: 10240, // 对超过10k的文件进行压缩
                deleteOriginalAssets: false, // 是否删除未压缩的源文件,不设置或者False,表示在删除gz文件后还能加载到原始文件
            }),
        ]
    }
}

这里压缩后的文件扩展名为.gz,文件名和源文件名相同。

gzip压缩
gzip压缩


3. 服务器端Nginx配置支持gzip

前面我们已经对源文件进行了gzip的压缩,同时还需要在Nginx配置中,打开gzip_static开关。

server {
    listen       80;
    gzip_static on;
    location / {
    }
}

为提高Nginx的性能,我们使用静态gzip压缩,前面我们已经提前压缩好了资源文件,当客户端请求到达时,可以直接发送压缩好的.gz文件,这样就减小了传输的文件体积,提高了响应速度。


最后我们来看看效果:

浏览器开发工具网
浏览器开发工具网
响应头gzip
这样,我们从原来的的访问近10秒的时间,降到了3秒以内,效果还是非常明显的。

发表回复

您的电子邮箱地址不会被公开。 必填项已用 * 标注