使用bundle-analyzer分析并优化Next.js包大小，加快网页加载速度

✨ 前言与总结

✨

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

自用全专线，小贵但效果超好
Aifun 爱翻 - 机场测评

📝 主要内容

前言

本文以基于Next.js构建托管于Cloudflare的本博客站自己作为讲解分析对象，主要目的是记录本站的优化过程，具体更详细权威的优化还请参考

Web Vitals | Articles | web.dev

衡量网站是否运行正常的基本指标

https://web.dev/articles/vitals?hl=zh-cn

提供的具体解决方案有因框架/架构/网站/个人水平的局限性，敬请谅解，如有错误还请指正

优化要分大小

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

是否遵循规范

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

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

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

安装并配置 bundle-analyzer

npm: @next/bundle-analyzer

Use `webpack-bundle-analyzer` in your Next.js project. Latest version: 15.1.6, last published: 11 days ago. Start using @next/bundle-analyzer in your project by running `npm i @next/bundle-analyzer`. There are 217 other projects in the npm registry using @next/bundle-analyzer.

https://www.npmjs.com/package/@next/bundle-analyzer#installation

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

由下图可知，主要的占用为 clerk包和namespace object

💡

每个矩形代表模块或软件包。矩形的大小显示了将模块或包装与捆绑包中的其他包装进行比较的大小或小。因此，矩形越大，其大小越大，反之亦然

Clerk包大小优化

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

解决方案： 按需动态导入，即根据环境变量等配置项决定是否加载

Optimizing: Lazy Loading

Lazy load imported libraries and React Components to improve your application's loading performance.

https://nextjs.org/docs/app/building-your-application/optimizing/lazy-loading

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(),
    });
  }}
/>