Frontend Development 9 min read

How to Slash Vue App Load Time: CDN, Gzip, and Code Splitting Tips

This guide walks through diagnosing a slow Vue admin dashboard, using webpack‑bundle‑analyzer to spot heavy libraries, offloading Element UI via CDN, enabling gzip compression on Nginx and in the Vue build, and applying code‑splitting and prefetch strategies to keep the first‑screen load under three seconds.

Rare Earth Juejin Tech Community

Sep 18, 2025

How to Slash Vue App Load Time: CDN, Gzip, and Code Splitting Tips

Background

The client reported that the backend‑admin Vue project feels sluggish and the first screen must load within 3 seconds, otherwise the project faces risk of being cut.

Analyze Bundle Size

Install webpack-bundle-analyzer to inspect the bundle:

# NPM
npm install --save-dev webpack-bundle-analyzer

# Yarn
yarn add -D webpack-bundle-analyzer

Add the plugin to vue.config.js:

const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
module.exports = {
  plugins: [new BundleAnalyzerPlugin()],
};

Run the build and view the report: npm run build --report The generated report shows that Element UI and echarts occupy large portions of the bundle.

Offload Libraries via CDN

Use CDN to load heavy libraries and prevent them from being bundled.

Install the CDN files (example URLs):

https://cdn.staticfile.org/element-ui/2.15.12/theme-chalk/index.min.css
https://cdn.staticfile.org/element-ui/2.15.12/index.min.js

Insert the links into public/index.html:

<head>
  <link rel="stylesheet" href="https://cdn.staticfile.org/element-ui/2.15.12/theme-chalk/index.min.css">
</head>
<body>
  <script src="https://cdn.staticfile.org/element-ui/2.15.12/index.min.js"></script>
</body>

Remove the local element-ui import and style references from main.js. Then configure Webpack externals so that import 'element-ui' resolves to the global ELEMENT variable provided by the CDN:

module.exports = {
  plugins: [new BundleAnalyzerPlugin()],
  externals: {
    'element-ui': 'ELEMENT' // map import to global variable
  }
};

Explanation: When Webpack encounters import 'element-ui', it will not bundle the library but expect it to be available as window.ELEMENT at runtime.

Enable Gzip Compression

Configure Nginx to gzip static assets:

server {
  listen 8103;
  server_name your.domain.com;
  gzip on;
  gzip_types text/plain application/javascript text/css application/xml image/jpeg image/gif image/png;
  gzip_vary on;
}

In the Vue project, add compression-webpack-plugin and enable gzip in the build config:

npm i [email protected] --save-dev

// config/index.js
module.exports = {
  build: {
    productionGzip: true,
    productionGzipExtensions: ['js', 'css']
  }
};

Code Splitting & Lazy Loading

Convert static route imports to dynamic imports for on‑demand loading:

// Before
import About from './views/About.vue';
// After
const About = () => import(/* webpackChunkName: "about" */ './views/About.vue');

This reduces the initial bundle size by loading route components only when needed.

Prefetch Strategy

Optionally disable the default prefetch plugin or fine‑tune its blacklist:

module.exports = {
  chainWebpack: config => {
    // Remove prefetch plugin
    config.plugins.delete('prefetch');
    // Or customize
    config.plugin('prefetch').tap(options => {
      options[0].fileBlacklist = options[0].fileBlacklist || [];
      options[0].fileBlacklist.push(/myasyncRoute(.)+?\.js$/);
      return options;
    });
  }
};

Vendor Chunk Splitting

Separate node_modules dependencies into a dedicated vendor chunk:

config.optimization.splitChunks({
  chunks: 'all',
  cacheGroups: {
    vendors: {
      name: 'chunk-vendors',
      test: /[\\/]node_modules[\\/]/,
      priority: -10,
      chunks: 'initial'
    }
  }
});

On‑Demand Lodash

Import only the needed lodash function:

import debounce from 'lodash/debounce';

Result

After applying CDN offloading, gzip compression, and aggressive code splitting, the first‑screen load time drops dramatically, satisfying the client’s three‑second requirement.