关于前端优化（持续更新中。。。）

对于项目来说，代码的开发是一个从无到有的环节，而优化是一个让项目变得成熟的过程

ok 话不多说，我们开始吧

一、代码方面的优化（开发人员的基本素养）

1、减少没必要的代码，高内聚低耦合

把多次复用的提到公共组件中

2、for循环设置key值

利用 Diff 的特性

3、Vue路由设置成懒加载

当首屏渲染的时候，能够加快渲染速度。

有时候我们想把某个路由下的所有组件都打包在同个异步块 (chunk) 中。只需要使用 命名 chunk，一个特殊的注释语法来提供 chunk name (需要 Webpack > 2.4)。

const Foo = () => import(/* webpackChunkName: "group-foo" */ './Foo.vue')

网上的有请求时间的统计：

在路由配置文件里，这里是router.js里面引用组件。如果使用同步的方式加载组件，在首屏加载时会对网络资源加载加载比较多，资源比较大，加载速度比较慢。所以设置路由懒加载，按需加载会加速首屏渲染。在没有对路由进行懒加载时，在Chrome里devtool查阅可以看到首屏网络资源加载情况（6requests 3.8MB transfferred Finish:4.67s DOMContentLoaded 2.61s Load 2.70s）。在对路由进行懒加载之后（7requests 800kb transffered Finish2.67s DOMContentLoaded 1.72s Load 800ms）,可以看见加载速度明显加快。但是进行懒加载之后，实现按需加载，那么项目打包不会把所有js打包进app.[hash].js里面

优点：就是减少js的体积

缺点：如果项目过大，需要在开发环境中取消懒加载的效果，因为拆分多个请求，增加了请求的数量，开发的时候经常刷新影响开发效率

4.异步组件

在需要它的时候加载它（因为配合webpack的打包而起到优化的效果）

5.更加理解Vue的生命周期

• 没用的组件 需要销毁

6.合理使用keep-alive

处理好初始化的问题，别影响到业务功能

7.按需引入

最后打包的时候，只留我需要用的

8.节流防抖

防止触发或者执行没必要的请求和方法

9.无状态的组件标记为函数式组件

10.合理利用计算属性的依赖缓存

提高读取效率

二、非代码优化

1.修改vue.config.js(webpack)中的配置项，把productionSourceMap设置为false（减少不必到的代码被打包）

不生成.map文件

webpack默认会生成map文件，map文件是用来调试代码的，把productionSourceMap设置为false。此外，这里还要注意sourcemap的配置分 开发（dev）和线上（build）两个地方配置，开发我们就不管了，就用默认的，线上我们是不需要这个代码的。

2.使用cdn的方式外部加载一些资源

https://blog.csdn.net/weixin_...
比较喜欢人家的解释说明

https://blog.csdn.net/xiangzh...
两个一起看疗效好，哈哈哈哈

负载均衡，最快的获取到公用的包

写好备用包，也就是你的本地文件，CDN会有出故障的时候，避免报错

3.减少图片使用(精灵图和压缩图)

拜托美工啦

4.SSR(服务端渲染)

服务端渲染减轻前端渲染的负担

5.骨架屏加载

指标不治本，但是提高用户体验

6.图片的懒加载

使用vue-lazyload库
对于图片过多的页面，为了加速页面加载速度，所以很多时候我们需要将页面内未出现在可视区域内的图片先不做加载，
等到滚动到可视区域后再去加载。这样子对于页面加载性能上会有很大的提升，也提高了用户体验

总结 ：文章以vue为例，也适用于其他框架，怎么实现不是最重要的，最重要的是思路啦~

ok 接下来的会持续更新中。。。