我在 GitHub 上基于 React 和 Webpack 搭建了一个 Demo 项目，模拟了现实中可能遇到的性能问题，详细记录了如何将 Lighthouse 评分从 2 分提升到 99 分的过程。

前言 前段时间老板心血来潮，要我们前端组对整个的项目都做一下接口防止重复请求的处理（似乎是有用户通过一些快速点击薅到了一些优惠券啥的）。。。行吧，搞就搞吧，you happy jiu ok！

单页面首屏优化，打包后大小减少64M，加载速度快了13.6秒 1. 静态文件缓存(js,css等)，图片和SVG进行压缩或者替换。 2. 删掉无用路由、引用的库（实际未使用），然后启用树摇 3. ..

对于几百M或上G的大图而言，不管对图片进行怎么优化或加速处理，要实现秒开也是不太可能的事情。而“图像分割切片”是最佳解决方案。图像切片是指将一张大图分割成若干个小图的过程，以便于存储和处理。

现如今的页面越来越复杂，一个页面往往承载着大量的元素，最常见的就是一些电商页面，数以万计的商品列表是怎么保证渲染不卡顿的，大家在面对这种长列表渲染的场景下，一般都会采用分页或者虚拟列表来减缓页面一次性

问题描述 面试官：后端一次性返回10万条数据给你，你如何处理？ 我：歪嘴一笑，what the f**k! 问题考察点 看似无厘头的问题，实际上考查候选人知识的广度和深度，虽然在工作中这种情况很少遇到

这里所述的组件库动态加载和 webpack 构建项目的懒加载是不同的，此文将以 babel-plugin-import 插件为主，讲解组件库按需加载方案的实现原理。

Performance是Chrome浏览器自带的性能监测工具。根据我的使用，简单理解就是我们可以通过它录制一段时间的浏览器活动，通过活动的数据去分析页面是否存在提升的空间。想要获取页面的活动数据，那我们的第一步便是录制浏览器的活动。 打开F12，进入Perfomance标签页，…

今天介绍下 Chrome dev tools 家族的一个小兄弟，它在 Chrome 57 之前叫作「Timeline」，而现在换了个更长的马甲 —— 「Performance」，毕竟名字要「长～～～～～～～～～」更能吸引注意。 也许你曾不经意启动过这个工具，看见里面五颜六色的图…