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

Question

I am splitting my react code with multiple entry points in webpack, these bundles are then loaded independently at completely different pages(HTML documents).

I have a lot of shared code, and most of my shared logic is under if-else check, so this shared logic is present in all the bundles, causing the increase in bundle size. The condition for this if-else check is based on a variable which we generate at run time, but these variables can be set based on the entrypoint.

Is it possible to set some environment variable based on entrypoints(which I can use for the if-else check), so webpack can treeshake and remove the code which is not required in the bundle?

Answer 1

I had a more less similar issue on my project. We needed to have different builds for different products and of course wanted to omit irrelevant code in the bundle. Might be you find something useful here

Step 1 - Create new build definitions with variables

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

Note - I am using SET SOME_VARIABLE=XXXX to provide environment variable for the build

Step 2 Split your shared file into several files:

/shared/first.tsx

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

/shared/second.tsx

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

Step 3 - update your imports and point them to the specific files

// 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()} </>;

Final Step - Use If-Else, Environmental variable and React.lazy to load your entry point

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 />; }
}

Now, if you run npm run build:first and check the bundle you will see that:

• First.tsx and Second.tsx components put to theirs own respective chunks
• Functions we moved out of the common file was respectively inlined into the related chunks.
• Not used functions did not exists in the build