共计 3999 个字符，预计需要花费 10 分钟才能阅读完成。
Vue 网站首页加载优化
本篇次要解说 Vue 我的项目打包后 vendor.js 文件很大 如何对它进行优化 以及开启 Vue 的压缩 和 nginx gzip 压缩的应用，
其余就是对接口优化等
1. vendor.js 优化
因为 Vue 我的项目随着性能变多 依赖也会随之变多，缩小 vendor.js 的次要办法就是将其 不打包依赖！！
1.1 第一步、cdn 引入各种包
index.html 中 cdn 的形式引入 vue、vuex、axios、iview、等包，如下图：
1.2 第二步、在应用 vue 等包的中央，正文掉 import 引入
关上 main.js 文件 正文掉须要排除的依赖 import，并且正文掉 Vue.use
//Vue.prototype.$axios = axios;
//Vue.use(iView)
1.3 第三步、打包漠视掉 vue 等包
在 webpack.base.conf.js，把须要从 cdn 形式引入的依赖，都排除掉，包含 iview vue axios 等等 如下图
1.4 最终从新打包 npm run build
能够发现 Vue 的 vendor.js 文件的确变小了很多，这样在加载首页的时候 浏览器申请它的时候不会过大
可见 vendor.js 从 1M 多曾经缩小到 400k 了
2.Vue 开启 Gzip 压缩
2.1 config/index.js 开启 productionGzip
将其 productionGzip 配置成 true
2.2 配置 Gzip 的 插件配置
关上 webpack.prod.config.js 配置一下这段代码
代码如下
if (config.build.productionGzip) {const CompressionWebpackPlugin = require('compression-webpack-plugin')
webpackConfig.plugins.push(
new CompressionWebpackPlugin({asset: '[path].gz[query]',
algorithm: 'gzip',
test: new RegExp(
'\\.(' +
config.build.productionGzipExtensions.join('|') +
')$'
),
threshold: 10240,
minRatio: 0.8
})
)
}
2.3 配置打包 report 查看具体打包信息
关上 package.json，配置
"report": "npm run build --report=true"
2.4 从新打包查看 Gzip 压缩状况
从新 npm run build 能够看到提供的 gz 压缩包 vendor.js.gz 曾经小到了 100k 左右了，从刚开始 1M 曾经优化到当初的 100k 了
3. 开启 Nginx Gzip 性能
3.1 gzip 的概念
gzip 是 Web 世界最宽泛的文件压缩算法，曾经失去了绝大多数的服务端和客户端软件（例如咱们应用的浏览器）的反对。gzip 最为善于的是压缩纯文本文件，其成果非常明显，大概能够缩小 70%以上的文件大小，所以 Web 我的项目中开启 gzip 十分必要
3.2 nginx gzip 如何配合 vue 应用
当时用 Vue 生成的 gzip 压缩好文件（.gz）让 nginx 依据申请来本人抉择 .gz 文件输入，利用 nginx 中的模块 http_gzip_static_module，不耗费 CPU 资源，nginx 配置只须要在上述外面退出一行即可，如下：
gzip_static on;
3.3 次要要增加 http_gzip_static_module 模块
nginx 中的模块 http_gzip_static_module 默认是不在的
所以咱们要记得在 nginx 外面增加上 http_gzip_static_module 模块，参见：yum 装置下的 nginx，如何增加模块，和增加第三方模块
装置完 http_gzip_static_module 模块后，应用 nginx -V 命令查看是否模块加载胜利
3.4 nginx gzip 具体配置
关上 nginx 的 nginx.conf 文件 在 server 局部配置上 gzip 的配置
gzip on; 开启或敞开 gzip on off
gzip_buffers 32 4k;
gzip_comp_level 5; 压缩等级，字数越大压缩越好，工夫也长
gzip_static on; 重要！示意应用曾经压缩好的 gz 文件，依据申请 配合 vue 生成的 gz 文件
gzip_min_length 1k;
gzip_http_version 1.1;
gzip_types text/plain application/javascript text/css application/xml text/javascript application/x-httpd-php image/jpeg image/gif image/png;
3.5 查看是否失效
能够看到相应头中存在 Content-Encoding:gzip 示意曾经配置胜利
4. 首页接口优化
对首页接口 page 进行优化，次要是针对不须要的字段不返回，缩小报文，一开始包含了 markdown 的报文和 markdown 生成的 html 报文 导致报文很大，申请接口耗时很长
能够看到优化后的接口只有 43ms 即可
5.Banner 图切分，图片上 CDN
将首页 Banner 图进行拆分压缩 8 份，并且放到 CDN 上
将其余图片也全副放到 CDN 上，自己应用七牛云 CDN
6. 七牛云 CDN 上传工具类
/**
* 七牛云 拜访工具
*
* @author johnny
* @create 2019-12-03 下午 2:17
**/
public class QiniuAccessUtils {
/**
* 七牛 AK 本人去七牛云申请
*/
public static final String accessKey = "e1C2jGSQsaTBN******************";
/**
* 七牛 SK 本人去七牛云申请
*/
public static final String secretKey = "23pb5PmhN9j4*******************";
/**
* 七牛存储空间名
*/
public static final String bucket = "johnny-blogs";
/**
* 七牛默认域名 -> 切换为了 正式域名 http://cdn.askajohnny.com/
*/
public static final String domain = "http://cdn.askajohnny.com/";
// 设置好账号的 ACCESS_KEY 和 SECRET_KEY
private static String ACCESS_KEY = accessKey;
private static String SECRET_KEY = secretKey;
// 要上传的空间 // 对应要上传到七牛上 你的那个门路（本人建文件夹 留神设置公开）private static String bucketname = bucket;
// 密钥配置
private static Auth auth = Auth.create(ACCESS_KEY, SECRET_KEY);
private static Configuration cfg = new Configuration(Zone.huanan());
// 创立上传对象
private static UploadManager uploadManager = new UploadManager(cfg);
// 简略上传，应用默认策略，只须要设置上传的空间名就能够了
public static String getUpToken() {return auth.uploadToken(bucketname);
}
public static String UploadPic(String FilePath, String FileName) {Configuration cfg = new Configuration(Zone.huanan());
UploadManager uploadManager = new UploadManager(cfg);
//AccessKey 的值
String accessKey = ACCESS_KEY;
//SecretKey 的值
String secretKey = SECRET_KEY;
// 存储空间名
String bucket = bucketname;
Auth auth = Auth.create(accessKey, secretKey);
String upToken = auth.uploadToken(bucket);
try {Response response = uploadManager.put(FilePath, FileName, upToken);
// 解析上传胜利的后果
DefaultPutRet putRet = new Gson().fromJson(response.bodyString(), DefaultPutRet.class);
System.out.println(putRet.key);
System.out.println(putRet.hash);
return domain + FileName;
} catch (QiniuException ex) {
Response r = ex.response;
System.err.println(r.toString());
try {System.err.println(r.bodyString());
} catch (QiniuException ex2) {//ignore}
}
return null;
}
}
7. 总结
本篇次要解说 Vue 我的项目打包后 vendor.js 文件很大 如何对它进行优化 以及开启 Vue 的压缩 和 nginx gzip 压缩的应用，
其余就是对接口优化等。实际出真谛！！！
本文由博客一文多发平台 OpenWrite 公布！
