【效果显著】vue-cli3 vue 首屏加载速度优化 gzip压缩资源

最新推荐文章于 2024-07-09 18:13:44 发布

泡泡码客

最新推荐文章于 2024-07-09 18:13:44 发布

阅读量604

点赞数

分类专栏：前端文章标签： vue nginx 首屏优化性能优化 gzip

本文链接：https://blog.csdn.net/qq_28827635/article/details/107942145

版权

前端专栏收录该内容

38 篇文章 0 订阅

订阅专栏

加速效果在 5-100倍
诸君先过目下效果图
在这里插入图片描述

安装webpack插件compression-webpack-plugin

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

在vue.config.js中如下配置

const CompressionWebpackPlugin = require('compression-webpack-plugin')
const productionGzipExtensions = ['js', 'css']
module.exports = {
...
configureWebpack:{
	plugins: [
		new CompressionWebpackPlugin({
	        filename: '[path].gz[query]',   // 目标资源名称。
	        algorithm: 'gzip', // 可以是 function(buf, callback) 或者字符串。对于字符串来说依照 zlib 的算法(或者 zopfli 的算法)。默认值是 "gzip"。
	        test: new RegExp('\\.(' + productionGzipExtensions.join('|') + ')$'),  // 所有匹配该正则的资源都会被处理。默认值是全部资源。
	        // threshold: 10240,  // 只有大小大于该值的资源会被处理。单位是 bytes。默认值是 0
	        minRatio: 0.8 // 只有压缩率小于这个值的资源才会被处理。默认值是 0.8。
	      })
	]
}
...
}

nginx配置如下即可
```
server {
    listen       8081;
    server_name  localhost;

    location / {
        gzip_static on;
        root /usr/share/nginx/html;
        index index.html index.htm;
        try_files $uri $uri/ /index.html;
    }
}
```
因为我们在前端打包时就产生了 gzip文件,所以nginx只需开启gzip_static.这个配置项的意思是:当nginx发现文件的同目录下存在gzip格式的同名文件时,优先读取gzip格式文件数据发送至客户端.

若不使用前端打包产生gzip的话, nginx可以通过gzip:on的方式开启服务端在线压缩.也就是说当文件同目录下不存在gzip同名文件时,nginx会把文件在线压缩并发送至客户端