2021-10-04 前端性能优化方法

---

前言

随着代码数量越来越多，如何加快项目浏览器中的运行速度，减少用户的等待时间便成为了很重要的一个方面，以下是我经过实践后的几个方法

---

1、GZIP

GZIP可以对文件进行压缩，压缩比例到3到10左右，是很实用的压缩方法

1.1、使用步骤

因为我们目前的项目比较老，使用的是vue-cli2.x的版本，所以只需要在vue-cli2的config.js文件中进行如下配置并安装compression-webpack-plugin即可

	// Gzip off by default as many popular static hosts such as
    // Surge or Netlify already gzip all static assets for you.
    // Before setting to `true`, make sure to:
    // npm install --save-dev compression-webpack-plugin
    productionGzip: true,
    productionGzipExtensions: ['js', 'css'],

还可以选择想要压缩的文件格式
其它的脚手架可根据里面已有脚手架自行开启，或者自行安装使用相应插件

如果项目使用了nginx，那也可以在nginx中进行配置

	gzip on;
    gzip_proxied any;
    gzip_comp_level 6;
    gzip_buffers 16 8k;
    gzip_types image/svg+xml text/plain text/xml text/css text/javascript application/xml application/xhtml+xml application/rss+xml application/javascript application/x-javascript application/x-font-ttf application/vnd.ms-fontobject font/opentype font/ttf font/eot font/otf image/jpeg image/gif image/png image/x-icon;

以上放在serve配置下即可

2、CDN

内容分发网络（Content Delivery Network，简称CDN）是建立并覆盖在承载网之上，由分布在不同区域的边缘节点服务器群组成的分布式网络，它会根据用户的位置寻找最近的服务器获取资源，获取资源后结合用户自定义配置的缓存策略，将资源缓存至节点以便下次访问，提升了访问速度和稳定性。CDN使用第三方库，也不会出现在我们打包后的代码中，减少了代码体积

2.1、使用步骤

目前网络上有很多提供CDN服务的服务商如tx云，或者推荐可以免费使用的jsdelivr，我们开发中需要的第三方库基本在里面都可以找到

以ECharts为例：

	// index.html中引入
	<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/echarts.min.js"></script>

	// webpack.base.conf中添加
	externals: {
	  'echarts': 'echarts'
	}

3、缓存

缓存一般分为强缓存和协商缓存，浏览器一般用第二种，如果某些静态文件我们确认很长一段时间内不会更改，那我们就可以使用强缓存来保存该文件

3.1、使用步骤

在nginx.conf中的serve增加如下配置

	location ~ .*\.(gif|jpg|jpeg|png|bmp|swf)$ {
      access_log off;
      expires 10d;
    }

    location ~ .*\.(js|css)$ {
      expires 10d; // 10d表示10天，具体参数可以自行配置
    }

注：用户强制刷新的话该缓存就会失效

4.组件

4.1、注意事项

1.使用组件懒加载
2.尽可能使用组件复用（如ui组件库样式与设计稿样式不一致，则需对ui组件做局部的二次封装）
3.可配置第三方库的按需引入

5.其它

5.1、减少HTTP请求

小图标可以使用base64或iconfont，精灵图也可以

5.2、懒加载

1.较大的图片一定使用懒加载，不然会阻塞用户界面，影响用户体验
2.界面滚动加载
3.表格数据多则需要分页加载或者滚动懒加载

总结

以上就是我对这方面的总结，有什么这方面的见解的话欢迎一起探讨~