首页 > 其他 > 详细

vue-cli3.0开启GZIP资源压缩

时间:2020-03-12 11:23:49      阅读:231      评论:0      收藏:0      [点我收藏+]

这是去年的项目了,偶然想起,顺便几下笔记

一、问题发现

在一个项目中首页出现白屏,资源加载长达4S+,用户体验极差,单单下面这个JS就加载了2.8S,所以此处必须优化

技术分享图片

 

 

 

 二、开启GZIP压缩

1.webpack 在打包时可以借助 compression webpack plugin 实现gzip压缩,首先需要安装该插件:

npm i-D compression-webpack-plugin

 

2、在vue.config.js

 技术分享图片

 

技术分享图片

 

 

 3、执行cnpm run build 看看打包效果,出现了.gz文件,说明我们的配置生效了,但是还没结束,继续看下一步

 

 

技术分享图片                                                                                      

 4、需要服务器配置,在nginx中启用gzip压缩,代码如下

gzip on;

gzip_types text/plain application/javascript text/css application/xml text/javascript application/x-javascript;

 

5、成果展示

 网址:https://hetong.nawang.cn/

技术分享图片

 

vue-cli3.0开启GZIP资源压缩

原文:https://www.cnblogs.com/zjk6/p/12467109.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!