Optimizing Frontend Asset Delivery with Nginx Gzip and Webpack Compression

Many modern web applications use front‑end frameworks like Vue, resulting in large bundles that slow first‑time page loads.

This article demonstrates two approaches to improve load speed: enabling dynamic gzip compression in Nginx and pre‑compressing assets with the compression-webpack-plugin during the build.

Dynamic gzip in Nginx

server {
    listen 80;
    listen [::]:80;
    server_name localhost;
    server_tokens off;
    # enable gzip
    gzip on;
    gzip_disable "msie6";
    gzip_vary on;
    gzip_proxied any;
    gzip_comp_level 6;
    gzip_buffers 16 8k;
    gzip_http_version 1.1;
    gzip_types text/plain application/css text/css application/xml text/javascript application/javascript application/x-javascript;
    location /jxbp {
        alias /opt/llsydn/jxbp;
        index index.html;
        try_files $uri $uri/ /dist/index.html;
    }
}

After reloading Nginx ( nginx -s reload ) the compressed files are served, reducing transfer size from 24.6 MB to 7.6 MB and load time from 6.32 s to 2.36 s.

Static gzip with Webpack

Install the plugin:

npm install compression-webpack-plugin -D

Configure vue.config.js :

const CompressionWebpackPlugin = require('compression-webpack-plugin');
const productionGzipExtensions = ['js', 'css'];
module.exports.configureWebpack.plugins.push(
  new CompressionWebpackPlugin({
    test: /.js$|.html$|.css/,
    threshold: 1024,
    deleteOriginalAssets: false
  })
);

Run npm run build to generate .gz files, then enable gzip_static on in the Nginx server block.

With both dynamic and static gzip enabled, static resources are served efficiently, improving user experience without increasing server load.