如何基于process.env变量实现Webpack静态/动态导入文件？

你可以利用Webpack在构建时能识别process.env变量的特性，结合顶层导入和条件赋值实现需求，同时避开ES模块import必须顶层声明的限制。

方法一：静态导入+条件赋值（推荐） #

直接在顶层静态导入B组件，再根据环境变量决定使用静态组件还是动态导入函数。Webpack会在构建时自动tree shaking，剔除不需要的分支代码：

import A from "@/views/A.vue";
// 顶层静态导入B组件
import BStatic from "@/views/B.vue";

// 根据环境变量切换组件类型
const B = process.env.SOME_VAR 
  ? BStatic // 静态导入模式
  : () => import("@/views/B.vue"); // 懒加载模式

const vueRouterConfig = {
    // ... 其他路由配置
    b: {
        component: B
    }
};

方法二：动态导入统一封装 #

如果不想在顶层导入B组件，也可以用函数封装逻辑，借助Webpack的条件编译特性实现：

import A from "@/views/A.vue";

const getBComponent = () => {
  // 构建时Webpack会根据SOME_VAR的值只保留对应分支
  if (process.env.SOME_VAR) {
    return Promise.resolve(import("@/views/B.vue"));
  } else {
    return import("@/views/B.vue");
  }
};

const vueRouterConfig = {
    // ... 其他路由配置
    b: {
        component: getBComponent
    }
};

原理说明 #

ES模块的import是声明式语法，必须放在文件顶层，不能嵌套在条件语句中。而process.env.SOME_VAR是Webpack在构建时注入的常量，Webpack会在编译阶段确定该变量的值，自动优化掉无用分支，最终实现静态导入或懒加载的效果。

内容的提问来源于stack exchange，提问作者vuelicious