NextJS中多次调用同路径dynamic import如何进行性能优化？

ES 模块本身自带全局缓存机制，你当前的写法实际上不会重复执行../abcs模块的加载逻辑，所有重复的import('../abcs')调用都会直接返回第一次加载完成的缓存模块对象，不存在实际的性能损耗。但我们可以从代码可维护性角度优化写法，消除路径硬编码冗余。

方案1：抽离公共导入函数（兼容所有Next.js版本） #

不需要修改原有Index.js的导出逻辑，仅修改App.js中的导入部分，把重复的导入路径抽成复用函数即可，还支持给每个组件单独配置动态导入参数：

// App.js
import dynamic from 'next/dynamic'

// 公共导入逻辑，路径仅需写一次，后续修改只需要调整这一处
const importAbcModule = () => import('../abcs')

// 可单独给每个组件配置ssr开关、loading占位等参数
const A = dynamic(() => importAbcModule().then(module => module.A), { ssr: false })
const B = dynamic(() => importAbcModule().then(module => module.B), { loading: () => <p>加载中</p> })
const C = dynamic(() => importAbcModule().then(module => module.C))

方案2：批量解构导入（适用Next.js 12.1+ 版本） #

新版本Next.js的dynamic支持直接导入整个模块后解构命名导出，写法更简洁，适合所有组件的动态导入配置一致的场景：

// App.js
import dynamic from 'next/dynamic'

const { A, B, C } = dynamic(() => import('../abcs'), {
  ssr: true // 配置对三个组件同时生效
})

注意：你示例代码里使用的中文弯引号‘’需要替换为英文单引号'，否则会触发语法报错。

内容的提问来源于stack exchange，提问作者Eric