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}`
)

本文原载于：baiyun.me

原文链接：https://baiyun.me/webpack-dynamic-import