每日一博 | 优化 web 应用程序性能方案总结
在开发 web 应用程序时候,性能都是必不可少的话题。而大部分的前端优化机制都已经被集成到前端打包工具 webpack 中去了,当然,事实上仍旧会有一些有趣的机制可以帮助 web 应用进行性能提升,在这里我们来聊一聊能够优化 web 应用程序的一些机制,同时也谈一谈这些机制背后的原理。 Chrome Corverage 分析代码覆盖率 在讲解这些机制前,先来谈一个 Chrome 工具 Corverage。该工具可以帮助查找在当前页面使用或者未使用的 JavaScript 和 CSS 代码。 工具的打开流程为: 打开浏览器控制台 console ctrl+shift+p 打开命令窗口 在命令窗口输入 show Coverage 显示选项卡 webpackjs 其中如果想要查询页面加载时候使用的代码,请点击 reload button 如果您想查看与页面交互后使用的代码,请点击record buton 这里以淘宝网为例子,介绍一下如何使用 上面两张分别为 reload 与 record 点击后的分析。 其中从左到右分别为 所需要的资源 URL 资源中包含的 js 与 css 总资源大小 当...




