前端优化-首屏加载优化_前端首屏优化

优化首屏加载

首屏加载慢问题分析
首屏在一些必须的文件都加载成功后才开始进行渲染，首屏加载慢的主要耗时就在加载这些必须的文件上，这些必须的文件是

js/app.d796800d.js
js/chunk-vendors.e95de2cc.js
css/app.69fa25fa.css
css/chunk-vendors.53794358.css

解决方案：解决方案就是加快加载这些必须文件

一、路由懒加载

1、使用 vue-router 懒加载解决首次加载时资源过多导致的速度缓慢问题

路由懒加载是一种按需要加载的方式，即需要时再加载。优化方案是将直接导入js变成按需要导入js。app.js中的页面拆分成单独的js文件，按需加载，加速app.js文件的下载速度从而减少首页加载时间。

当打包构建应用时，JavaScript 包会变得非常大，影响页面加载。如果我们能把不同路由对应的组件分割成不同的代码块，然后当路由被访问的时候才加载对应组件，这样就会更加高效。

//写法1：
{
	path: "/base/user",
	name: "user",
	component: resolve => require.ensure([], () => resolve(require('@/modules/base/user/User')), 'User'),
	meta: {
		breadcrumb: ["基本信息", "用户管理"]
	}
},
    
//写法2：
{
    path: "/safety",
    component: Layout,
    redirect: "/safety",
    children: [
      {
        path: "/safety",
        component: (resolve) => require(["@/views/safety/index"], resolve),
        name: "Safety",
        meta: { title: "安全管理", icon: "workplace", affix: true },
      },
    ],
},
    
//写法3：
// 将
// import UserDetails from './views/UserDetails.vue'
// 替换成
const UserDetails = () => import('./views/UserDetails.vue')
const router = createRouter({
  // ...
  routes: [{ path: '/users/:id', component: UserDetails }],
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34

二、CDN加速

在打包后发现chunk-vendor.js 文件占用内存特别大，这里面主要是使用的一些第三方库，例如 vue-router,axios，elementUI ，echarts等文件。
通过在index.html 中直接引入第三方资源来缓解我们服务器的压力，其原理是将我们的压力分给了其他服务器站点。
推荐外部的库文件使用CDN资源：
bootstrap CDN：https://www.bootcdn.cn
Staticfile CDN：https://www.staticfile.org
jsDelivr CDN：https://www.jsdelivr.com
75 CDN：https://cdn.baomitu.com
UNPKG：https://unpkg.com
cdnjs：https://cdnjs.com

以引入vue、vuex、vue-router为例：
第一步 在index.html中引入第三方库：

<!-- 引入Vue.js -->
<script src="https://cdn.staticfile.org/vue/2.4.3/vue.min.js"></script>
<!-- 引入vuex.js -->
<script src="https://cdn.staticfile.org/vuex/3.0.0/vuex.min.js"></script>
<!-- 引入vue-router -->
<script src="https://cdn.staticfile.org/vue-router/3.0.0/vue-router.min.js"></script>
1
2
3
4
5
6

第二步 去vue-config文件中去配置externals,写上你已经在index.html中引用了cdn的库。

第三步，将所有的引用去掉：

// import Vue from "vue";
// 引入element 组件
// import ElementUI from "element-ui";
// import "element-ui/lib/theme-chalk/index.css";
// import VueRouter from "vue-router";
// import Vuex from "vuex";
// Vue.use(ElementUI);
// Vue.use(VueRouter);
// Vue.use(Vuex);
1
2
3
4
5
6
7
8
9

三、图片资源压缩以及使用图片懒加载

对于图片较多的页面来说，图片的大小对于页面加载速度的影响十分明显。所以在项目上线之前，一般都要将图片压缩一下

CSS雪碧图 ：使用雪碧图可以把多个图片整合到一张图片中，减少HTTP请求次数。但是当整合图片比较大时，一次加载会比较慢，加载失败会导致多个位置的图片无法正常显示。

转换成base64：将图片数据编码成串字符串，来代替原本图像的地址，图片不需要再进行http请求。（缺点：无法缓存；转换后会导致CSS文件体积增大,渲染时长时间出现空白屏幕，影响用户体验,而且只可以转化小图片，图片过大不能转）

SVG矢量图：常用于存储图标，只加载一次，图片不需要再进行http请求。图片放大也不会模糊

大图片压缩网站

TinyPNG

https://tinypng.com/

TinyPNG 是一款线上图片压缩工具，采用智慧型无损压缩技术来降低 PNG 图片大小，而这个方法可以透过降低图片中的色彩数量，来减少存储图片所需的空间，这样做法能够大幅度降低图片的大小，但又不会造成图片过度损坏，像素降低等等，至少从肉眼上看不出差别，且能够保存 PNG 的 alpha 透明度特性。

Optimizilla

https://imagecompressor.com/zh/

Optimizilla 和 TinyPNG 差不多，一次可以批量压缩最多 20 张 JPG 或 PNG 图片，压缩完后还可以打包下载，使用最佳优化和压缩算法来达到最小尺寸的JPEG 和 PNG图 像，同时保证最佳质量与尺寸比。

onlineimagetool

https://www.onlineimagetool.com/zh/

没有使用数量、图片大小限制，完全免费。单次无个数限制，算是优势。

压图大师

https://jpgmin.cn/

无需上传服务器，本地压缩，无大小，数量限制，支持JPG、PNG压缩，PNG支持良好，可自定义压缩参数。

四、防止编译文件中出现map文件

在 config/index.js 文件中将productionSourceMap的值设置为false.

五、gzip压缩

前端配置gzip压缩，并且服务端使用nginx开启gzip，用来减小网络传输的流量大小。
第一步
命令行执行：npm i compression-webpack-plugin -D
第二步
在webpack的dev开发配置文件中加入如下代码:

const CompressionWebpackPlugin = require('compression-webpack-plugin')
plugins: [
   new CompressionWebpackPlugin()
]
1
2
3
4

六、前端代码优化

合理使用v-if和v-show
使用定时器和回调函数等记得销毁
避免意外的全局变量
适当使用闭包避免内存泄漏