基于 webpack 入口点创建环境变量

Question

我将我的反应代码与 webpack 中的多个入口点分开，然后这些包在完全不同的页面（HTML 文档）中独立加载。

我有很多共享代码，我的大部分共享逻辑都在if-else检查下，所以这个共享逻辑存在于所有 bundle 中，导致 bundle 大小增加。 此if-else检查的条件基于我们在运行时生成的变量，但这些变量可以根据入口点进行设置。

是否可以根据入口点设置一些环境变量（我可以将其用于if-else检查），所以 webpack 可以 treeshake 并删除捆绑包中不需要的代码吗？

Answer 1

我的项目中有一个不太相似的问题。 我们需要针对不同的产品进行不同的构建，当然希望在捆绑包中省略不相关的代码。 也许你在这里找到了有用的东西

第 1 步 - 使用变量创建新的构建定义

{
 scripts: {
  "build:first": "SET TYPE=first && npm run build",
  "build:second": "SET TYPE=second && npm run build"
 }
}

注意 - 我正在使用SET SOME_VARIABLE=XXXX为构建提供环境变量

第 2 步将您的共享文件拆分为多个文件：

/共享/first.tsx

export const firstMethod = () => "I AM A FIRST";

/共享/second.tsx

export const secondMethod = () => "I AM A SECOND";

第 3 步 - 更新您的导入并将它们指向特定文件

// 第一个.tsx

import { firstMethod } from "./shared/first";
export default () => <> First Component says: {firstMethod()}  </>;

// 第二个.tsx

import { secondMethod } from "./shared/second";
export default () => <> Second Component says: {secondMethod()} </>;

最后一步——使用 If-Else、环境变量和 React.lazy 来加载你的入口点

let LazyComponent: React.LazyExoticComponent<() => JSX.Element>;

if (process.env.TYPE === "first") {
  LazyComponent = React.lazy(() => import("./first"));
} else {
  LazyComponent = React.lazy(() => import("./second"));
}

class App extends Component {
  render() { return <LazyComponent />; }
}

现在，如果您运行npm run build:first并检查包，您将看到：

• First.tsx 和 Second.tsx 组件放在各自的块中
• 我们从公共文件中移出的函数分别内联到相关的块中。
• 构建中不存在未使用的函数