使用bundle-analyzer分析并优化Next.js包大小,加快网页加载速度
Lazy loaded image使用bundle-analyzer分析并优化Next.js包大小,加快网页加载速度
字数 1051阅读时长 3 分钟
2025-2-1
2025-2-14
AI智能摘要
GPT
本文介绍了如何使用bundle-analyzer工具分析并优化Next.js项目的包大小,以提高网页加载速度。文中详细说明了安装与配置过程,以及如何通过动态导入和懒加载等策略来减少Clerk包和namespace object的占用空间。作者强调优化应基于实验和数据,最后提供了相关参考文章和总结。

✨ 前言与总结

本文介绍了如何使用 bundle-analyzer 工具来分析和优化 Next.js 的包大小,以加快网页加载速度。文章通过详细解释了 bundle-analyzer 的使用方法,分析了 Next.js 项目中各个模块或软件包的大小,以及如何通过优化来减小包的体积。此外,文章还探讨了如何解决 Clerk 包和 namespace object 占用空间过大的问题,以及如何通过按需动态导入来优化非首要功能的包大小。
自用全专线,小贵但效果超好
Aifun 爱翻 - 机场测评
Aifun 爱翻 - 机场测评
notion image

📝 主要内容

前言

本文以基于Next.js构建托管于Cloudflare本博客站自己作为讲解分析对象,主要目的是记录本站的优化过程,具体更详细权威的优化还请参考
提供的具体解决方案有因框架/架构/网站/个人水平的局限性,敬请谅解,如有错误还请指正

优化要分大小

同样的工作量优化10ms和1000ms是完全不一样的,过度的优化反而会影响开发上的效率

是否遵循规范

有的规范你不遵守也没啥大影响,但有的就可能直接导致几秒的延迟

一切的优化,请基于实验和实际统计数据作为最终判断标准

使用 bundle-analyzer  分析后发现大量组件为大型组件或按需导入组件需要延迟加载或按需加载

安装并配置 bundle-analyzer 

运行 ANALYZE=true yarn build 进行包大小分析

由下图可知,主要的占用为 clerk包和namespace object
notion image
💡
每个矩形代表模块或软件包。矩形的大小显示了将模块或包装与捆绑包中的其他包装进行比较的大小或小。因此,矩形越大,其大小越大,反之亦然

Clerk包大小优化

  • 问题分析: Clerk 在项目中作为一项可选功能,但是是被import静态导入的

namespace object 部分优化

  • 问题分析: namespace object 是用于动态导入时所用的资源,占用过大是因为存在大量的可能会被切换到的主题资源,所以即使没有被打包进来,光是映射就占用了这么大的空间。
  • 解决方案: 把不打算被切换的主题相关资源删除舍弃

动态导入懒加载

对于非首要功能且重型非首屏资源,优化包大小,特别是根据尺寸或者条件才会加载的,建议采取此类方式
  • 单纯动态导入
    • 只是从静态导入变成动态导入,还是会加载
      <ComponentA />
  • 按需动态导入
    • 从静态导入变成动态导入,根据条件判断是否进行加载
      {showMore && <ComponentB />}
      <input type="text" placeholder="Country search..." className={styles.input} onChange={async (e) => { const { value } = e.currentTarget; // Dynamically load libraries const Fuse = (await import('fuse.js')).default; const _ = (await import('lodash')).default; const fuse = new Fuse(countries, { keys: ['name'], threshold: 0.3, }); const searchResult = fuse.search(value).map((result) => result.item); const updatedResults = searchResult.length ? searchResult : countries; setResults(updatedResults); // Fake analytics hit console.info({ searchedAt: _.now(), }); }} />

📖 延伸阅读

🤗 总结归纳

暂无
自用全专线,小贵但效果超好
Aifun 爱翻 - 机场测评
Aifun 爱翻 - 机场测评
notion image

📎 参考文章

主要参考 暂无
 
💡
还可以加入Telegram的七行的小仓库|互联网记忆|博客 七行 技术交流群 找到更多小技巧哦🥰,还可以在聊天群探讨各种问题❓
欢迎在底部评论区分享您的想法和经验,让我们一起共同探讨,共同进步!
 

评论
Loading...