前端性能和加载体验优化实践(附:PWA、离线包、内存优化、预渲染)

探讨了页面加载卡顿的原因并提出了多种优化方法。主要原因包括项目包或第三方脚本过大、JavaScript 执行阻塞页面加载、图片体积大且多等。优化策略包括构建缩包按需加载、减少图片体积等。文章还详细介绍了如何通过 Webpack 插件分析项目中用到的 npm 包及大小,以及如何通过调整图片尺寸、格式转换、压缩等方式减小图片体积。

Promise + Async&Await + Array.reduce + 函数递归 解决网络/接口请求的依次/排队不间断间隔访问

在频繁更新数据场景中,传统 `setInterval` 可能因请求时间过长导致数据覆盖问题。通过 `Array.reduce` 和异步函数,将每个网络请求封装为 Promise,确保前一请求完成后再发起下一请求。完成一轮后递归调用自身,实现连续顺序请求循环,保证数据更新的准确性和稳定性。

Webpack 只打包 CSS

介绍了如何使用 Webpack 单独打包 CSS 文件,通过设置“傀儡”入口文件 (style.js 和 index.style.html),结合 MiniCssExtractPlugin 和 HtmlWebpackPlugin 插件实现 CSS 文件的独立构建。提供了详细的配置示例,适用于处理零散项目的模块化打包需求。