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

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

一、问题发现

在一个项目中首页出现白屏，资源加载长达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/