关于java:Vue-网站首页加载优化

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 公布！

关于java:Vue-网站首页加载优化

Vue 网站首页加载优化

1. vendor.js 优化

1.1 第一步、cdn引入各种包

1.2 第二步、在应用vue等包的中央，正文掉import引入

1.3 第三步、打包漠视掉vue等包

1.4 最终从新打包 npm run build

2.Vue开启Gzip压缩

2.1 config/index.js 开启productionGzip

2.2 配置Gzip的插件配置

2.3 配置打包report 查看具体打包信息

2.4 从新打包查看Gzip压缩状况

3.开启Nginx Gzip性能

3.1 gzip的概念

3.2 nginx gzip如何配合vue应用

3.3 次要要增加 http_gzip_static_module 模块

3.4 nginx gzip 具体配置

3.5 查看是否失效

4.首页接口优化

5.Banner图切分，图片上CDN

6.七牛云CDN上传工具类

7.总结

评论

发表回复取消回复

更多文章

DDN HPC 存储硬件架构设计深度分析

探秘IO500：从Lustre并行文件系统出发，开启HPC存储性能新征程

苹果iOS打包的ipa应用无法安装？一篇文章带你了解可能的原因及排查方法

图解Golang：从零开始实现简易版过期LRU缓存

关于java:Vue-网站首页加载优化

Vue 网站首页加载优化

1. vendor.js 优化

1.1 第一步、cdn引入各种包

1.2 第二步、在应用vue等包的中央，正文掉import引入

1.3 第三步、打包漠视掉vue等包

1.4 最终从新打包 npm run build

2.Vue开启Gzip压缩

2.1 config/index.js 开启productionGzip

2.2 配置Gzip的 插件配置

2.3 配置打包report 查看具体打包信息

2.4 从新打包查看Gzip压缩状况

3.开启Nginx Gzip性能

3.1 gzip的概念

3.2 nginx gzip如何配合vue应用

3.3 次要要增加 http_gzip_static_module 模块

3.4 nginx gzip 具体配置

3.5 查看是否失效

4.首页接口优化

5.Banner图切分，图片上CDN

6.七牛云CDN上传工具类

7.总结

评论

发表回复 取消回复

更多文章

DDN HPC 存储硬件架构设计深度分析

探秘IO500：从Lustre并行文件系统出发，开启HPC存储性能新征程

苹果iOS打包的ipa应用无法安装？一篇文章带你了解可能的原因及排查方法

图解Golang：从零开始实现简易版过期LRU缓存

2.2 配置Gzip的插件配置

发表回复取消回复