【前端优化】常见前端性能优化

资源压缩 减少HTTP请求

静态资源压缩

• html：压缩空格、换行、注释等字符 Webapack — html-webpack-plugin
• css：无效代码删除，语义合并（相同样式代码） Webpack css-loader
• js：无效字符删除、剔除注释代码语义的缩减和优化 Webpack — UglifyJSPlugin

• 图片优化方案：

  • 雪碧图
  • 小文件 使用base64 webpack base64-inline-loader
  • 图片压缩网站
  • svg

资源合并

• 弊端：

  • 首屏渲染问题，合并文件太大，造成慢。
  • 缓存失效问题 标记 md5戳 只要有一个变动 则失效 a,b,c三个js合并
• 规则：公共库合并，不同页面的各自合并。异步加载组件，不同页面单独打包，监听路由变化，自动下载
• 实现：gulp插件梳理工作流/webpack配置loader和plugin

非核心代码异步加载

正常网页的加载流程：

1. 浏览器一边下载 HTML 网页，一边开始解析。也就是说，不等到下载完，就开始解析。
2. 解析过程中，浏览器发现