Cut Frontend Bundle Size Using Webpack Analyzer and Babel

In the era of large‑scale front‑end development, performance and user experience are critical; even a well‑built back‑end cannot compensate for a bloated front‑end.

To reduce bundle size, the team first analyzes which npm packages contribute most to the output using webpack-bundle-analyzer. The analysis reveals that commons.js (generated by protobuf) accounts for nearly half of the bundle, with about 180 k lines.

Because commons.js is generated from .proto files, the team splits the protobuf output into business‑specific modules. By invoking pbjs for each business group, separate JavaScript files (e.g., biz1.js, biz2.js) are produced, allowing on‑demand loading.

However, the generated modules still contain redundant code such as the shared gf.common block and a nested module‑pattern that overwrites previous namespaces. To clean these, Babel is used with four plugins: @babel/parser, @babel/traverse, @babel/types, and @babel/generator.

The transformation process parses each file into an AST, traverses it to locate and remove the gf.common assignment, and replaces empty object declarations with conditional initializations that preserve existing namespaces (e.g.,

gf.client.biz1 = $root.gf.client.biz1 || ($root.gf.client.biz1 = {});

). The code snippets below illustrate the Babel configuration and the AST manipulation logic.

const parser = require('@babel/parser');
const traverse = require('@babel/traverse').default;
const generator = require('@babel/generator').default;

// 1. Parse code to AST
let ast = parser.parse(code, { sourceType: 'module' });

// 2. Define transformations
let traverser = {
  ExpressionStatement(path) {
    let left = path.node.expression.left;
    if (left && left.type == 'MemberExpression' &&
        left.object.type == 'Identifier' && left.object.name == 'gf' &&
        left.property.type == 'Identifier' && left.property.name == 'common') {
      path.remove();
    }
  },
  VariableDeclaration(path) {
    if (path.node.declarations.length != 1) return;
    let decl = path.node.declarations[0];
    if (path.node.kind == 'const' && decl.init.type == 'ObjectExpression' && decl.init.properties.length == 0) {
      // replace with conditional namespace initialization
    }
  }
};

// 3. Traverse and modify AST
traverse(ast, traverser);

// 4. Generate transformed code
return generator(ast).code;

After applying these Babel‑based transformations, the size of commons.js is reduced by nearly 50 %, leading to faster load times and a better user experience.

In summary, combining bundle analysis with automated AST rewriting provides a powerful approach to front‑end performance optimization beyond traditional techniques such as lazy loading.