【前端优化】加载时间久

一、减少请求次数，看同一个页面有没有重复调用的接口
二、图片压缩，或者做成网图也可以减小包的体积,图片预加载懒加载。合理使用字体图标
三、插件按需引入，代码压缩
四、CDN加速
将打包后的资源放到CDN，index页面引用CDN的资源
main.js 设置 webpack_public_path = window.staticResourceURLPrefix || “/”;

window.staticResourceURLPrefix在index页面上赋值
在这里插入图片描述
五、路由懒加载
在单页应用中，如果没有应用懒加载，运用webpack打包后的文件将会异常的大，
造成进入首页时，需要加载的内容过多，延时过长，不利于用户体验，
运用懒加载可以将页面进行划分，按需加载页面，可以分担首页所承担的加载压力，减少加载用时。（解决vue项目首次加载慢）

路由和组件的常用两种懒加载方式：

1、vue异步组件实现路由懒加载

　　component：resolve=>(['需要加载的路由的地址'，resolve])

2、es提出的import(推荐使用这种方式)

　　const HelloWorld = （）=>import('需要加载的模块地址')

例子：
const routes = [
  {
    
    
    path:'/',
    component:resolve => require(['@/components/common/main'],resolve),
    children:[
      {
    
    
        path:'/home',
        component:resolve => require(['@/components/page/home/home'],resolve)
      },
      {
    
    
        path:'/issue',
        component:resolve => require(['@/components/page/product/product_issue'],resolve)
      }
    ]
  }
]

例子：
import Vue from 'vue'
import Router from 'vue-router'

Vue.use(Router)

const HelloWorld = ()=>import("@/components/HelloWorld")
export default new Router({
    
    
  routes: [
    {
    
    
      path: '/',
      name: 'HelloWorld',
      component:HelloWorld
    }
  ]
})

六、组件懒加载

// 异步方法
<template>
  <div class="hello">
  <One-com></One-com>
  1111
  </div>
</template>

<script>
export default {
    
    
  components:{
    
    
    "One-com":resolve=>(['./one'],resolve)
  },
  data () {
    
    
    return {
    
    
      msg: 'Welcome to Your Vue.js App'
    }
  }
}
</script>

<template>
  <div class="hello">
  <One-com></One-com>
  1111
  </div>
</template>

<script>
// const方法
const One = ()=>import("./one");
export default {
    
    
  components:{
    
    
    "One-com":One
  },
  data () {
    
    
    return {
    
    
      msg: 'Welcome to Your Vue.js App'
    }
  }
}
</script>

方法六：压缩与缓存

前面提到gzip，我们发现这能大大减少文件的体积，例如一个180k的css文件被压成30k，就减少了83%的体积。
如何开启，这需要Nginx服务器的支持（关于Nginx，我也多次提到，不再多说）：
在 nginx.conf （Nginx的配置）中：

server{
    
    
	gzip on;
	gzip_types	text/plain application/javascript application/x-javascript text/javascript text/xml text/css;
}

这属于HTTP协议的内容
但是它有缺点，就是重新渲染的问题
我们不如使用 etag ，Nginx开启etag只需要在server配置（ nginx.conf etag ）里加上一行：etag on; 即可。

方法七: 升级到HTTP/2

据说现在http2已经席卷而来，而且其有一个强大的优势，**在于对于一个域只进行一次tcp连接，使用多路复用，传输多个资源（同时加载），**这样就不必使用诸如雪碧图、合并css/js文件等技术减少请求数了（使用雪碧图只有一个优点：减少请求次数，这和它不可避免的缺点（高清屏会失真、图片变化极不方便）相比，简直不足为道）。
这个技术的使用也很简单，只需要使用nginx 1.10.0和openssl 1.0.2以上版本，安装好后再配置文件中（ ngnix.conf ）加上：listen 443 ssl http2; 即可。（写在http块中的server块中）
当然，对于不兼容HTTP2的浏览器，nginx也会自动处理。
打开firefox 可以看到http的版本
在这里插入图片描述

【前端优化】加载时间久

猜你喜欢