Webpack 动态导入

webpack 的 Module Resolution 规则这样的，如果 path 中包含扩展名则直接打包，否则按照 resolve.extensions 中的文件扩展来匹配出最终文件 ，如果是目录则根据 resolve.mainFields 来找到匹配的文件。

resolve.extensions 和 resolve.mainFields 中的内容都是按顺序来匹配的，只取第一个匹配到的值

适合不能用 webpack Module Resolution 特性的情况下使用，这种做法可能导致目录多一层嵌套，但是胜在高效、直观、扩展性好

const dynamicLoad = (scene, subScene) => { subScene = subScene ? `${subScene}/` : '' return asyncComponent({ resolve: () => import(/* webpackChunkName: "page." */ `./scenes/${scene}/${subScene}index.js`), ErrorComponent: InternalError, }) } 

使用 webpack 的 Module Resolution 特性来简化，但是这种做法因为末尾没有文件后缀，导致 webpack 会尝试匹配所有类型的文件，包括那些只是位于搜索路径之下但是没有实际使用的文件，从而造成一定的性能浪费

const dynamicLoad = (scene, subScene = 'index') => { return asyncComponent({ resolve: () => import(/* webpackChunkName: "page." */ `./scenes/${scene}/${subScene}`), ErrorComponent: InternalError, }) } 

可以使用 webpack 新增的两个魔法注释 （webpackInclude 和 webpackExclude）来限定匹配范围

import( /* webpackInclude: /\.js$/ */ /* webpackExclude: /\.noimport\.js$/ */ `./templates/${templateName}` ) 

要获得最佳阅读体验，请访问原文 https://baiyun.me/webpack-dynamic-import