我有一个小型的nextjs应用程序，它依赖于几个内部和外部库，虽然生产构建有很好的性能，但开发构建非常慢，当我对一个页面组件进行更改时，它会触发一个重建，我在控制台中看到这样的消息：
event - compiled client and server successfully in 15.5s (2267 modules)
event - compiled client and server successfully (2279 modules)我发现这是一个非常庞大的模块。但是我能做些什么呢？我如何找到更多关于这些模块来源的信息，以便我可以消除它们或进一步优化？
不会导致重建时间接近60秒的"可接受"模块数量是多少？
1条答案
按热度按时间41zrol4v1#
我遇到了同样的问题，经过长时间的搜索，我发现这是由加载
@material-ui/icons引起的，因为它们是从安装在node_modules文件夹中的内部包导入的，而在生产模式下，它们是直接从代码导入的。**开发环境：**开发捆绑包可能包含完整的库，这可能会导致启动时间变慢。如果从@material-ui/icons导入，这一点尤其明显。启动时间比不从顶级API进行命名导入的情况下大约慢6倍。
我遵循了此指南，其中提供了两种解决方案：
1.使用路径导入来避免拉入未使用的模块。
1.添加一个babel插件，自动将命名导入重命名为默认导入（更多推荐，因为它提供了最佳的用户体验和开发者体验）
在使用babel并将named imports重命名为default之后，编译时间从11.3秒缩短到2.9秒