约 47% 的用户期望他们的页面在两秒之内加载完成。 如果页面加载时间超过 3s，约 40% 的用户会选择离开或关闭页面。 一直以来，为了提升用户在页面加载时的体验，无论是 Web 还是 iOS、Android 的应用中，前端开发工程师都做了许多工作。除了解决如何让网页展现速度…

让网页展现的更快，官方说法叫做首屏绘制，First Paint 或者简称 FP，直白的说法叫做白屏时间，就是从输入 URL 到真的看到内容（不必可交互，那个叫 TTI, Time to Interactive）之间经历的时间。当然这个时间越短越好。 但这里要注意，和首屏相关的除…

现在的前端开发领域，都是前后端分离，前端框架的主流都是SPA，MPA;这就意味着，页面渲染以及等待的白屏时间，成为我们需要解决的问题点；而且大项目，这个问题就尤为突出。

page-skeleton-webpack-plugin是一款由ElemeFE团队开发的webpack 插件，该插件的目的是根据你项目中不同的路由页面生成相应的骨架屏页面，并将骨架屏页面通过 webpack 打包到对应的静态路由页面中。 对页面中元素进行删减或增添，对已有元素通…

关于 React 应用加载的优化，其实网上类似的文章已经有太多太多了，随便一搜就是一堆，已经成为了一个老生常谈的问题。 但随着 React 16 和 Webpack 4.0 的发布，很多过去的优化手段其实都或多或少有些“过时”了，而正好最近一段时间，公司的新项目迁移到了 Rea…

随着业务的不断迭代，项目日渐壮大，为了给用户提供更优的体验，前端优化是我们避不开的话题。一个优秀的网站必然是拥有丰富功能的同时具有比较块的响应速度，想必我们浏览网页时都更喜欢丝般顺滑的感受。 作为前端工程师来说，项目优化主要关注一下几点：白屏时间、首屏时间、整页时间、DNS时间…

1. 业务js按需加载 2. webpack-bundle-analyzer（可视化视图查看器） 查看 webpack 打包后所有组件与组件间的依赖关系，针对多余的包文件过大。 发现 antd中的icon组件以及本地引入的moment打包出来过大。 3. 针对moment打包过…

该方案主要是为了解决，前端 spa (单页面应用)，首屏渲染慢，白屏时间过长问题。 通过 webpack 的 prerender-spa-plugin 编译应用中的静态页面，并将其输出到对应的索引目录。 prerender-spa-plugin 利用了 Puppeteer 的爬…

本文已参与[新人创作礼]活动，一起开启掘金创作之路 首先，谈谈为什么要做性能优化，做性能优化的好处在哪？ 性能优化的好处 前端，是一个产品直接展示在用户眼前的战场，而前端性能直接影响了用户体验。