Webpack 动态导入

November 25, 2017

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

如果你喜欢我的内容,请考虑请我喝杯咖啡☕吧,非常感谢🥰 。

If you like my contents, please support me via BuyMeCoffee, Thanks a lot.