想要成为一名合格的Web前端工程师，Web前端性能优化是一个必须要掌握的知识，那么应该怎么进行Web前端性能优化呢？

代码规范

  • eslint
  • tslint

  • prettier

    目录规范

    api 请求数据，统一管理接口，接口路径
    components 公共组件
    common 公共的代码库，插件
    containers 视图组件
    router 路由及路由配置
    utils 工具库
    App.vue 入口页面
    main.js 入口文件

    命名规范

    css优化

  • 减少不必要层级嵌套

  • 减少使用缩写 精准样式：使用padding-left: 10px 而不是 padding: 0 0 0 10px。
  • 0px 简写成 0
  • link
  • @import

  • 提取公共样式

    性能优化

  • 压缩css

  • 压缩js
  • 图片压缩
  • 减少http请求次数(合并 js，css)
  • css-sprite 通过雪碧图使用定位来减少服务器请求次数
  • 减少代码重复，提升代码复用性

    SEO 搜索引擎优化