YanTianFeng的知识库

Want Coding

Want Reading

文章 89

访问 18326

评论 2

头像

YanTianFeng

发私信

文章 89
访问 18326
评论 2
Technology and Code
返回顶部

Knowledge  开启gzip压缩代码

标签   gzip  

  ( 24 )       ( 0 )


开启 gzip 压缩代码

spa 这种单页应用,首屏由于一次性加载所有资源,所以首屏加载速度很慢。

(1) 解决这个问题非常有效的手段之一就是前后端开启 gizp (其他还有缓存、路由懒加载等等)

(2)gizp 其实就是帮我们减少文件体积,能压缩到 30 %左右,即 100k 的文件 gizp 后大约只有 30k 。

(3)vue - cli 初始化的项目中,是默认有此配置的,只需要开启即可。但是需要先安装插件:

// 2.0的版本设置不一样,本文写作时为v1版本。v2需配合vue-cli3cnpm i compression-webpack-plugin@1.1.11

(4) 然后在 config / index.js 中开启即可:

build: {
    // 其他代码
    …………
    productionGzip: true, // false不开启gizp,true开启
    // 其他代码
}

现在打包的时候,除了会生成之前的文件,还是生成 .gz 结束的 gzip 过后的文件。具体实现就是如果客户端支持 gzip ,那么后台后返回 gzip 后的文件,如果不支持就返回正常没有 gzip 的文件。

注意:这里前端进行的打包时的 gzip ,但是还需要后台服务器的配置。配置是比较简单的,配置几行代码就可以了,一般这个操作可以叫运维小哥哥小姐姐去搞一下,没有运维的让后台去帮忙配置。