前端代码优化（持续更新...）

 前言

这个迭代开发需求比较少，就打算着手对项目进行一些优化，主要从代码优化和性能优化两个方面入手。仅以此篇随笔记录一下一些优化的要点，前端优化的路程漫漫，持续更新...

 

1.css优化重构

1）提升代码性能

　　a.尽可能将样式写在单独的css文件里面；单独css文件的好处：（1）内容和样式分离，易于管理和维护；（2）减小页面体积；（3）css文件能够被缓存、重用，维护成本下降

　　b.不使用@import；import并非引入代码到<style></style>里面，而是发起新的请求得到样式资源，而且没有加scoped；把@import改为<style src=""></style>引入外部样式，就能够解决样式是全局的问题

　　c.避免使用复杂的选择器，层级越少越好；建议选择器的嵌套最好不要超过三层，简洁的选择器不只能够减小css文件大小，提升页面的加载性能，浏览器解析时也会更加高效，也会提升开发人员的开发效率，下降了维护成本。

　　d.精简页面的样式文件，去掉不用的样式；无效样式会形成（1）样式文件偏大，影响加载速度（2）浏览器会进行多余的样式匹配，影响渲染时间的问题。正确的处理方法是根据当前页面须要的css去合并那些当前页面用到的CSS文件；合并成一个文件有一个优势：样式文件会被浏览器缓存，进入到其余页面样式文件不用再去下载。

　　e.利用CSS继承减小代码量；CSS中存在继承属性和非继承属性，区别是该属性的初始值是否使用父元素同属性的计算值。非继承属性能够经过指定值为inherit来实现继承。常见的能够继承的属性好比：color，font-size，font-family等等

2）提升代码的可维护性

　　a.命名与备注：命名要规范，见名思意

　　b.提取重复样式：提取相同的样式成为一个单独的类再引用，这样不只能够精简CSS文件大小，并且CSS代码变少，更易于重用和维护

　　c.书写顺序：显示属性-->自身属性-->文本属性

　　　　（1）位置属性(position, top, right, z-index, display, float等)
　　　　（2）大小(width, height, padding, margin)
　　　　（3）文字系列(font, line-height, letter-spacing, color- text-align等)
　　　　（4）背景(background, border等)
　　　　（5）其余(animation, transition等)

2.不生成map文件

vue项目打包以后的js会自动生成map文件

map文件做用：项目打包后，代码是压缩加密的，若是运行时报错，输出的错误信息没法准确得知是哪里代码报错；map能够像未加密代码同样，输出是哪一行哪一列有错。

若是不须要，能够找到config/index.js文件，修改productionSourceMap：false

不生成map文件能够减小dist包的大小，加快部署时间。

3.vue路由懒加载

使用require或import实现路由按需加载；

require将会告诉 webpack自动将代码切割成多个包，这些包会经过 Ajax 请求加载

使用import关键字引入，这个import('XXX')函数会返回一个Promise对象