专栏首页ios技术安装Vue 网站首页加载优化
原创

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配置只需要在上述里面加入一行即可,如下:[563513413](正在跳转),不管你是大牛还是小白都欢迎入驻

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 压缩的使用, 其他就是对接口优化等。实践出真理!!!

原创声明,本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

登录 后参与评论
0 条评论

相关文章

  • 博客首页加载的优化

    从刚做好这个博客不就第一次就发现了,发起 ajax 请求时,可以看到 content-download 的时间居然比 waiting 的时间还长,而且首页等待时...

    Krry
  • 「网站优化」网站优化如何快速优化网站到首页——一一揭秘

    网站想要优化到搜索引擎首页是必要的,但是需要下很大的功夫的。如何优化是一个所有SEOer想要学会的技巧。

    大脸猫
  • vue加载优化(全)

    程序员不务正业
  • 优化商城类网站首页的方法

    沈唁
  • Python Django个人网站搭建16-优化首页

    作者: zifanwang  发布于2020-05-24

    zifan
  • wordpress网站利用Memcached加载速度优化

    Memcached 是一种高性能的分布式内存对象缓存系统,在动态程序中使用 Memcached, 既能提高访问的速度,同时还减低了数据库的负载。

    陌涛
  • 网站性能优化(三)异步加载脚本

    原则上来说,HTML在使用<script>标签加载外部脚本文件时,会顺序下载,顺序执行,并阻碍其他资源文件的下载,比如图片(当然,如今主流浏览器是可以实现JS和...

    娜姐
  • 博客网站优化加载速度那些事

    注意,unicloud需要实名,如果不想实名的话可以将静态资源下载到本地根目录,将链接改为本地路径即可,前提是你的服务器是国内的或者亚太地区的,这样速度也比js...

    云白去时衣
  • Vue3学习(三)之网站首页布局开发

    上篇文章已经提到集成Ant Design Vue后,和Element Ui一样,还是组件的使用,然后就是复制粘贴改了。

    软件测试君
  • wordpress网站利用Redis加载速度优化

    常用的就是memcached、redis,但是相对来说Redis更符合需求,而且也更通用当然也可以用memcached

    陌涛
  • 个人博客网站怎么做好首页链接的SEO优化

    最近忙着给服务器做做数据迁移,忙里偷闲看了昝辉老师的博客感觉这篇文章很好就转发了,在很久之前我没怎么考虑做SEO优化,但是网站的权重是2,最近一年不知道是什么原...

    李洋个人博客
  • 优化网站加载速度的14个技巧

    优化了加载速度的网站不仅可以提高其搜索引擎的排名,同时也可以降低网站的跳出率,提高其转换率,还能提供更好的终端用户体验,这是当今基于Web环境取得成功的关键。

    大葡萄
  • Vue回炉重造之图片加载性能优化

    图片加载优化对于一个网站性能好坏起着至关重要的作用。所以我们使用Vue来操作一波。 备注

    马克社区
  • 记一次网站登陆后首页加载速度过慢。

    1.首先判断登陆时候校验查询是不是加载慢的问题,各种去除验证和查询都没有找到问题的所在。

    用户1499526
  • 网站关键词优化到首页位置的方法有哪些

    通过百度旗下的免费平台和搜狗、360等旗下免费平台,在发布信息的时候,把你的核心词加上长尾词融入进去,同时标题也要有核心词体现,发布的内容、图片等质量要高,信息...

    高级优化师

扫码关注腾讯云开发者

领取腾讯云代金券