减少 Next.js bundle size

Your Next.js Bundle Will Thank You

这篇文章分析了导致 Next.js 应用 build 后 bundle size 太大的一个原因：Barrel File。

我用 markdoc 重构我的博客时，也用了 Barrel File，可参考 markdoc 的 next.js 例子。

Barrel File 用于在一个文件中 export 多个 module，后续页面 import 某个 module 就可以从这个 Barrel File import，写法上更简单些。但如果 Next.js 的某个页面只从 Barrel File 中 import 了一个而不是全部 module，打包的时候，webpack 也会把这个 Barrel File export 的所有 module 都打包给这个页面，换言之，会把没用到的 module 都打包进这个页面，所以这个页面的 bundle size 就被不必要地增加了。

要降低由 Barrel File 引起的 bundle size 增加，有两种方法：

1. 不要从 Barrel File import module；
2. 在 package.json 中使用 "sideEffects": false；

事实上，很多 npm 包都使用了 "sideEffects": false，@markdoc/markdoc 就是。