基于Webpack入口点创建环境变量。

Question

我正在使用webpack将react代码拆分为多个入口点，然后在完全不同的页面（HTML文档）上独立加载这些捆绑包。

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

是否可能根据入口点设置一些环境变量（我可以用于if-else检查），以便webpack可以摇树并删除未在捆绑包中使用的代码？

- Ashish

Answer 1

我在自己的项目中遇到了类似的问题。我们需要为不同的产品创建不同的构建版本，并且当然希望从包中省略无关代码。也许你会在这里找到有用的东西。

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

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

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

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

/shared/first.tsx

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

/shared/second.tsx

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

步骤三-更新你的导入并将它们指向特定的文件

// first.tsx

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

// second.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组件被分别放入它们自己的块中。
• 我们从共同文件中移出的函数会被内联到相关的块中。
• 未使用的函数不会存在于生成的文件中。

- Drag13

---

你尝试过并行化多个入口点吗？此外，相对于在webpack内部使用入口点，单独构建每个入口点是否有任何缺点？ - Ashish

@Ashish - 没有，我们有一个共同的逻辑在开始时，没有理由将其拆分为不同的入口点。从webpack的入口点可以让您更好地控制。然而，对于使用CRA构建的应用程序，webpack不是一个选项，除非已弹出。 - Drag13