最近项目中遇到一个排查了很长时间才解决的问题,在此分享一下。页面主模块A中有个模块C不需要首屏展示,为了提高首屏加载速度,使用 React.lazy? 做了懒加载和预加载。
const C = React.lazy(() => import(/* webpackChunkName: "prefetch-module", webpackPrefetch: true */ './c') )
但是使用webpack打包后并没有看到code-splitting生成的chunk文件,排查多次才发现页面中的B模块也引入了C模块,但是使用的是正常的引入方式。如果想code-splitting生效,其他地方也得改成动态引入。