vue动态导入引起的坑+解决方式webpack打包时如果遇到变量这种动态导入，会把所有能匹配到的文件都打成一个包导致这个

项目需求

项目里有个这样的需求，用户可以配置弹框内的内容，支持填写前端的文件路径，然后弹框中显示对应的内容

初步解决方案

使用import或者require动态加载配置的文件路径

引起问题

发现在build打包时会把所有匹配的文件都打成了一个巨大无比的包，并且在弹框加载时会引用这个文件导致非常消耗时间

问题分析

webpack打包时如果遇到变量这种动态导入，会把所有能匹配到的文件都打成一个包导致这个包巨大无比。

问题解决

既然知道了是动态导入使用变量导致的，那我们换种思路，提前把所有需要动态导入的文件用一个对象包裹好，当我需要的时候直接用对象去匹配就可以了。webpack就提供了这种方法require.context。

首先遍历所有需要动态导入的文件

const getNameByPath = (url) => {
  return url.replace(/^\.\//, "").replace(/\.vue/, "")
}
let allPage = {}
let viewPage = require.context("@/view", true, /\.vue$/, 'lazy')
viewPage.keys().forEach(key => {
  let pageName = getNameByPath(key)
  allPage[pageName] = () => viewPage(key)
})

好了当我们需要动态导入时，直接根据路径去匹配对应的组件即可。

let pageUrl = xxx // 此处xxx是变量
this.dynamicComponent = allPage[getNameByPath(pageUrl)]