GatsbyJS 3项目中动态导入网站专属资源的问题排查

问题背景 #

基于GatsbyJS 3的多站点项目，共享同一代码库，通过process.env.GATSBY_SITE环境变量区分站点构建。当前站点专属组件/资源（如示例中的SVG）会被全部打包进所有站点的产物中，导致Lighthouse评分偏低、加载体验变差。

之前尝试的两种方案均无效：

1. 静态导入+运行时switch：Webpack编译时会打包所有import的资源，无视运行时逻辑，无法剔除冗余代码。
2. Loadable Components动态导入：因Webpack无法静态分析异步回调内的环境变量分支，仍会打包所有三个SVG资源。

可行解决方案 #

方案1：构建时静态分支消除（推荐） #

利用Gatsby环境变量在构建时的静态可确定性，直接在模块顶层做条件判断，让Webpack的Tree Shaking（生产模式下自动启用）完全剔除未用到的资源分支。

代码示例：

import React from "react";

let ImageComponent;

// 构建时根据环境变量直接锁定导入的组件，Webpack会剔除不符合条件的分支
if (process.env.GATSBY_SITE === "site1") {
  ImageComponent = require("../../images/site1.svg").default;
} else if (process.env.GATSBY_SITE === "site2") {
  ImageComponent = require("../../images/site2.svg").default;
} else {
  ImageComponent = require("../../images/default.svg").default;
}

const Image = () => {
  return <ImageComponent />;
};

export default Image;

方案2：动态导入配合静态条件判断 #

如果需要保留动态导入的形式，需将环境变量判断放在动态导入的外层，让Webpack编译时就能确定唯一需要打包的资源。

代码示例：

import React from "react";

// 构建时确定唯一导入路径，Webpack仅打包对应资源
const getImageComponent = async () => {
  if (process.env.GATSBY_SITE === "site1") {
    return import("../../images/site1.svg");
  } else if (process.env.GATSBY_SITE === "site2") {
    return import("../../images/site2.svg");
  } else {
    return import("../../images/default.svg");
  }
};

const ImageComponent = React.lazy(getImageComponent);

const Image = () => {
  return (
    <React.Suspense fallback={<div>Loading...</div>}>
      <ImageComponent />
    </React.Suspense>
  );
};

export default Image;

方案3：多站点配置拆分（架构级优化） #

若站点差异较多，可在Gatsby配置层面根据环境变量过滤资源或插件，进一步减少冗余。

比如修改gatsby-config.js，让gatsby-plugin-react-svg仅处理当前站点的SVG：

module.exports = {
  plugins: [
    {
      resolve: "gatsby-plugin-react-svg",
      options: {
        rule: {
          include: process.env.GATSBY_SITE === "site1" 
            ? /site1\.svg$/ 
            : process.env.GATSBY_SITE === "site2" 
              ? /site2\.svg$/ 
              : /default\.svg$/
        }
      }
    }
  ]
};

核心原理 #

Gatsby的环境变量是构建时注入的常量，而非运行时变量。只要将资源判断逻辑放在模块顶层（而非组件内部的运行时逻辑中），Webpack就能在编译阶段静态分析出需要打包的资源，彻底剔除冗余代码。

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