能否使用require.context实现Webpack动态导入？含Vue组件加载场景

当然可以！你已经用require.context处理了非Async结尾的组件，现在要加载剩下的Async组件其实很简单，只需要调整正则表达式，再结合异步组件的特性做一点小处理就行。

步骤1：创建匹配Async结尾组件的require.context #

你原来的正则通过(?!\w*Async\.vue$)排除了Async结尾的文件，现在反过来，我们写一个只匹配以Async.vue结尾的正则：/\/[A-Z]\w*Async\.vue$/，就能精准定位到目标组件。

步骤2：注册异步组件（推荐做法） #

既然文件名带Async，通常意味着这些组件是要懒加载的。注册时把它们包装成异步组件，Webpack会自动将这些组件拆分到单独的代码块，优化页面加载性能。

完整的代码示例如下：

const path = require('path'); // 别忘了提前导入path模块

const loadComponents = (Vue) => { 
  // 原来的非Async组件加载逻辑保持不变
  const components = require.context('@/components', true, /\/[A-Z](?!\w*Async\.vue$)\w+\.vue$/); 
  components.keys().forEach((filePath) => { 
    const component = components(filePath); 
    const componentName = path.basename(filePath, '.vue'); 
    Vue.component(componentName, component); 
  }); 
};

const loadAsyncComponents = (Vue) => {
  // 加载所有以Async.vue结尾的组件
  const asyncComponents = require.context('@/components', true, /\/[A-Z]\w*Async\.vue$/);
  
  asyncComponents.keys().forEach((filePath) => {
    // 提取组件名：比如把"ButtonAsync.vue"处理成"Button"
    const rawName = path.basename(filePath, '.vue');
    const componentName = rawName.replace(/Async$/, '');
    
    // 注册为异步组件，Webpack会自动拆分代码块
    Vue.component(componentName, () => asyncComponents(filePath));
  });
};

// 在Vue初始化代码中调用这两个函数即可
// 示例（main.js中）：
// import Vue from 'vue';
// loadComponents(Vue);
// loadAsyncComponents(Vue);

关键细节说明 #

• 正则/\/[A-Z]\w*Async\.vue$/和你原来的命名规则对齐，确保只匹配首字母大写、以Async.vue结尾的组件文件。
• 用工厂函数() => asyncComponents(filePath)注册组件，本质上是利用Webpack的动态导入特性，和import()的效果一致，require.context内部已经帮我们封装了这部分逻辑。
• 如果不需要懒加载，直接像非Async组件那样注册也可以：Vue.component(componentName, asyncComponents(filePath));，但这样就浪费了Async命名的设计初衷啦。

内容的提问来源于stack exchange，提问作者Stephan-v