Supercharging Vue Apps: Webpack Bundle Analysis, Gzip, WebP & HTTP/2 Optimizations

Background

The author reflects on four years of development experience, progressing from PHP + jQuery to SOA, Kubernetes micro‑services, and AI‑assisted development, and shares the need for systematic performance optimisation as projects grew in size and complexity.

Scenario 1 – Optimising Webpack Bundle Size

Problem Description

A Vue‑based admin dashboard accumulated over 733 chunks and approached 50 MB, causing slow initial load and frequent complaints from business teams.

Root Cause

Too many generated files and large chunk sizes increase download time and require a full hash refresh on each release.

Solution Overview

Use webpack-bundle-analyzer to visualise bundle composition, identify oversized modules, and prune unnecessary code.

Implementation Steps

Install the plugin: yarn add [email protected] Import and add the plugin in webpack.prod.config.js:

const webpack = require('webpack');
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
module.exports = merge(webpackBaseConfig, {
  output: {
    publicPath: '/dist/',
    filename: '[name].[hash].js',
    chunkFilename: '[name].[hash].chunk.js'
  },
  plugins: [
    new BundleAnalyzerPlugin() // default configuration
    // ... other plugins
  ]
});

Run yarn build. The plugin generates an interactive report.html showing file sizes, gzipped sizes, and dependency trees.

Insights Gained

Identify the actual content of each chunk.

Spot modules that dominate size (e.g., duplicated TinyMCE code).

Detect unused or mistakenly imported modules.

Compare raw size vs. gzipped size to evaluate compression ratio.

Gzip Compression

Enable server‑side gzip to reduce transferred payload by 3‑10×, saving bandwidth and improving load speed.

Nginx Gzip Configuration

server {
  ...
  gzip on;
  gzip_buffers 4 16k;
  gzip_comp_level 6;
  gzip_min_length 100k;
  gzip_types text/plain application/x-javascript application/javascript application/json text/css application/xml text/javascript application/x-httpd-php;
  gzip_disable "MSIE [1-6].";
  gzip_http_version 1.1;
  gzip_vary on;
  ...
}

Key parameters control when gzip is applied, buffer size, compression level, and MIME types.

Frontend Gzip via Webpack

Install compression-webpack-plugin and configure it in vue.config.js:

const CompressionPlugin = require('compression-webpack-plugin');
module.exports = {
  chainWebpack(config) {
    if (process.env.NODE_ENV === 'production') {
      config.plugin('compression')
        .use(CompressionPlugin)
        .tap(() => [{
          test: /\.js$|\.html$|\.css$/,
          filename: '[path].gz[query]',
          minRatio: 1,
          threshold: 10240,
          deleteOriginalAssets: false
        }]);
    }
  }
};

After yarn build, .gz files appear alongside original assets. Ensure the server serves the pre‑compressed files (e.g., gzip_static on; in Nginx).

Scenario 2 – Image Optimization with WebP

Problem

Early pages loaded many PNG/JPEG assets, with some images up to 1.4 MB and total page weight of 12.7 MB, causing >9 s load times.

Solution

Convert images to WebP, which offers 30‑45 % smaller size compared to PNG/JPEG while preserving quality, and use the <picture> element for graceful fallback.

<picture>
  <source srcset="~images/product.webp" type="image/webp">
  <source srcset="~images/product.png" type="image/png">
  <img src="~images/product.jpg" alt="Product">
</picture>

Converting a 1.4 MB image to WebP reduced it to ~0.5 MB and cut load time from 9 s to ~1.4 s, a ~70 % speed improvement.

Scenario 3 – Server‑Side Engineering: HTTP/2 & OSS/CDN

Why HTTP/2?

HTTP/1.1 limits concurrent requests per domain (typically 6), leading to head‑of‑line blocking. HTTP/2 multiplexes many streams over a single TCP connection, eliminating this bottleneck.

Nginx HTTP/2 Enablement

server {
  listen 443 ssl;
  http2 on;
  server_name example.com;
  ssl_certificate /path/to/cert.pem;
  ssl_certificate_key /path/to/key.pem;
  # other settings …
}

Static Asset Distribution with OSS and CDN

Store large static resources (images, videos, logs) in Alibaba Cloud OSS, enable CDN acceleration, and use distinct OSS domains to bypass the 6‑request‑per‑domain limit. Combined with HTTP/2, resources from different OSS domains load concurrently, dramatically reducing page‑load latency.

Mini‑Program Code Splitting & OSS Migration

For WeChat mini‑programs, split functionality into sub‑packages and host static assets on OSS. This keeps the main package under the 2 MB limit and allows on‑demand download of sub‑packages, improving startup time.

OSS Image Thumbnailing

OSS can generate thumbnails on the fly via query parameters, e.g.:

// Example URL
https://example-bucket.oss-cn-hangzhou.aliyuncs.com/image.jpg?x-oss-process=image/resize,w_300/quality,q_90

Typical results: a 2 MB original image becomes a 5 KB thumbnail, reducing load time from ~15 s to ~300 ms. Across a project, total image payload dropped from 73 MB to 1.6 MB (97 % space saving) and load time improved by ~93 %.

Conclusion

By combining Webpack bundle analysis, server‑side gzip, WebP conversion, HTTP/2, and OSS/CDN strategies, developers can achieve dramatic reductions in bundle size, network transfer, and page‑load time, leading to a smoother user experience and lower infrastructure costs.