How to Eliminate Multi‑Platform Code Bloat with Webpack Tree‑Shaking

Background

In many business scenarios the same web code needs to run on multiple platforms (H5, App, Pad, Mini‑Program), leading to extensive environment checks and wasted resources.

Problems

Scattered environment conditionals increase maintenance difficulty.

Code for other platforms is downloaded unnecessarily, wasting resources.

Solution Overview

Use Webpack's tree‑shaking together with compile‑time environment injection (DefinePlugin) to remove code that is not needed for the target platform.

1. Inject compile‑time environment variable

<code>new webpack.DefinePlugin({
  RUNTIME_ENV_EXPECT: JSON.stringify('APP')
});</code>

2. Refactor code

Separate container components (composition) from functional components (inheritance).

Replace runtime checks (isApp()) with compile‑time constants.

3. Enable tree‑shaking

Configure Babel to keep ES6 modules (modules: false) and mark side‑effect‑free files.

<code>module.exports = {
  presets: [
    ['@babel/preset-env', { modules: false, useBuiltIns: 'usage', corejs: 2 }]
  ],
  plugins: [
    '@babel/plugin-proposal-optional-chaining',
    '@babel/plugin-transform-runtime'
    // other plugins
  ]
};</code>

4. Multi‑round builds

Define a map of target environments (H5, APP, IPAD, MINI_PROGRAM) and generate a separate webpack config for each, producing files such as

page.h5.js

,

page.app.js

, etc.

5. Parallel builds

Use parallel‑webpack or its Node API to run builds for all platforms concurrently, avoiding conflicts from CleanWebpackPlugin and EndWebpackPlugin.

Results

After applying the strategy, common code size is reduced by up to 24.7 % and platform‑specific bundles shrink dramatically, while build time is improved by parallel execution.

Tree‑shaking is a bit of black magic – shijisun

Images illustrate the before/after code and build statistics.