步骤一 vue-cli开启打包压缩 和后台配合 gzip访问
1.首先打开 config/index.js ,找到 build 对象中的 productionGzip ,改成 true
2. 打开 productionGzip: true 之前,先要安装依赖 compression-webpack-plugin ,官方推荐的命令是:
npm install --save-dev compression-webpack-plugin
//(此处有坑) 如果打包报错,应该是版本问题 ,先卸载之前安装的此插件 ,然后安装低版本
npm install --save-dev compression-webpack-plugin@1.1.11
3.等安装好了,重新打包 npm run build ,此时打包的文件会 新增 .gz 文件。是不是比原来的js文件小很多呢,之后项目访问的文件就是这个.gz文件 。
4.后台nginx开启gzip模式访问,浏览器访问项目,自动会找到 .gz 的文件。加载速度明显提高。
- 开启 nginx gzip ,在 nginx.conf 配置文件中 配置
http { //在 http中配置如下代码,
gzip on;
gzip_disable "msie6";
gzip_vary on;
gzip_proxied any;
gzip_comp_level 8; #压缩级别
gzip_buffers 16 8k;
#gzip_http_version 1.1;
gzip_min_length 100; #不压缩临界值
gzip_types text/plain application/javascript application/x-javascript text/css application/xml text/javascript application/x-httpd-php image/jpeg image/gif image/png;
}
systemctl reload nginx.service
systemctl restart nginx.service
5 测试访问
curl -I -H "Accept-Encoding: gzip, deflate" "http://xxx.com" //访问请求中 Content-Encoding: gzip 表示 压缩成功页面,
6 正式访问项目,此时项目加载速度明显提升
步骤二 webpack来打包vue项目,vendor.js过大问题解决
1.造成过大的原因是因为在main.js导入第三库太多时,webpack合并js时生成了vendor.js(我们习惯把第三方库放在vendor里面)造成的.如下图在main.js引用element-ui等第三方库。后果就是你的服务器端的js文件越大则用户加载页面的时间会越长(因为所需下载js的时间越久)
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/7910f5b000b7a2a3e89f7aa35dc9e2ed.png)
2.解决方案:采用cdn加速去从别的服务器上加载第三方库而非自己的服务器,这样就会快很多.并且能节省自己服务器的带宽。