Next.js 12 如何将 Material-UI 应用编译速度提升 8 倍

有些人称Next.js 12是“迄今为止最大的一步”。尤其是Rust 粉丝。

Next.js 12 的新 Rust 编译器具有约 3 倍的本地刷新速度和约 5 倍的构建速度，但这并不是对我有帮助的功能。

对我来说，这次发布的无名英雄是......

已编译模块数！

Next.js 现在在控制台中输出客户端和服务器编译的快速刷新时间，包括编译的模块和文件的数量。

10,000 个模块 * 微弱 *

如果我们谈论的是异常值📚，那么 10,000 就很棒了，但是当我们谈论模块时，这简直令人恐惧😱。

我的应用程序使用Material-UI，但是非常小，所以发生了什么？！

看一下：

import Menu from '@mui/icons-material/Menu';
import ChevronRight from '@mui/icons-material/ChevronRight';
import Save from '@mui/icons-material/Save';

相对：

import { Menu, ChevronRight, Save} from '@mui/icons-material';

较短的那个看起来确实更漂亮，VSCode 甚至建议先从 @mui/icons-material 导入，但不要上当！

它如何影响编译时间？

// importing from @mui/icons-material
event - compiled successfully in 5.1s (10013 modules)

// importing from @mui/icons-material/ChevronRight
event - compiled successfully in 615ms (1024 modules)

作为首次使用 Next.js 的用户，在出现新的模块计数日志记录功能之前，我没有项目可以比较，因此无法意识到我的编译时间很慢。

如果您使用 Material-UI，请务必替换所有直接导入的实例@mui/material，@mui/icons-material因为您将编译整个软件包中的所有模块。还要注意barrel 文件！

剩下的 1,000 个模块，我还有一些需要改进的地方，但我想分享一下，让其他可能遇到同样问题的人也感受到！你的 Next.js 应用程序有多少个模块？

PS 感谢您阅读我的第一篇 DEV 文章！