Performance Optimization and Code Quality Improvement for a Large Vue3 + Vite PC Web Application

Project Overview

This is a Vue3 + Vite PC‑side web application built with Vite's default configuration and without dedicated performance tuning. After several business iterations the codebase grew to over 230 K lines, leading to noticeable performance issues and rising maintenance costs. A targeted refactor was undertaken, achieving a 52% page‑load speed increase and a 3.43 MB reduction in bundle size.

Current Situation Analysis

Page Performance Analysis

Internal tools similar to Lighthouse and Performance were used to audit the pages. The main findings were:

First‑screen request payload is too large.

High JS/CSS code coverage – many unnecessary modules are loaded.

Script parsing time occupies a large proportion of the load.

Excessive DOM node count on first paint.

44 resources are not served with Gzip compression.

Build Bundle Analysis

File size and dependency usage were examined using the Rollup Plugin Visualizer in Vite.

npm install --save-dev rollup-plugin-visualizer

Configuration example:

import { visualizer } from 'rollup-plugin-visualizer';
export default defineConfig({
  plugins: [vue(), visualizer({
    emitFile: false,
    file: "stats.html",
    open: true
  })]
});

The generated visual report revealed duplicated dependencies (e.g., all language packs of highlight.js , the entire lodash library, and repeated inclusion of echarts ), leading to a large bundle.

Code Duplication Analysis

Jscpd, an open‑source duplication detector, was employed.

yarn global add jscpd

Project configuration (excerpt):

{
  "jscpd": {
    "threshold": 5,
    "reporters": ["html", "console", "badge"],
    "ignore": ["node_modules", "miniprogram_npm", "pages/test", "config/mock.js "],
    "absolute": true,
    "gitignore": true
  }
}

Running the detection:

jscpd ./ -o "./report/"

The console output and generated HTML report highlighted duplicated code blocks for targeted refactoring.

Cyclomatic Complexity Analysis

Cyclomatic Complexity (CC) measures the number of linearly independent paths through source code. High CC (>10) indicates difficult‑to‑test, low‑cohesion modules.

Tools used: CodeMetrics (VSCode extension) and ESLint.

rules: {
  complexity: [
    'error',
    { max: 10 }
  ]
}

ESLint reports showed many functions exceeding the threshold.

Problem Summary

Excessive loading of unused resources causing long full‑page load times.

Oversized build bundles.

High code duplication rate and many functions with high cyclomatic complexity, increasing maintenance cost.

Goals

Reduce bundle size and page load duration.

Lower cyclomatic complexity of functions.

Decrease code duplication rate.

Implementation Plan

Bundle Size Optimization

On‑Demand Library Import

highlight.js – only required language packs are imported:

import hljs from 'highlight.js/lib/core';
import javascript from 'highlight.js/lib/languages/javascript';
hljs.registerLanguage('javascript', javascript);

Result: size reduced from 1.55 MB to 241 KB.

lodash – import specific functions instead of the whole library:

import cloneDeep from 'lodash/cloneDeep';
import debounce from 'lodash/debounce';

Result: size reduced from 642.57 KB to 112.11 KB.

To further simplify imports, vite-plugin-imp is used to rewrite import statements at build time:

import vitePluginImp from 'vite-plugin-imp';
vitePluginImp({
  libList: [
    { libName: 'lodash', libDirectory: '', camel2DashComponentName: false },
    // other libraries …
  ]
});

Avoid Duplicate Packaging and Extract Common Chunks

Manual chunk configuration in vite.config.ts :

build: {
  rollupOptions: {
    output: {
      manualChunks: {
        'vue-vendor': ['vue', 'vue-router', 'pinia'],
        'echarts': ['echarts'],
        'lodash': ['lodash']
      }
    }
  },
  terserOptions: {
    compress: {
      drop_console: true,
      drop_debugger: true,
      pure_funcs: ['console.log']
    },
    output: { comments: true }
  }
}

Gzip Compression

Install and configure vite-plugin-compression :

npm install -D vite-plugin-compression

import viteCompression from 'vite-plugin-compression';
viteCompression({
  verbose: true,
  disable: false,
  deleteOriginFile: false,
  threshold: 10240,
  algorithm: 'gzip',
  ext: '.gz'
});

Image Lossless Compression

Use vite-plugin-imagemin to compress images during build:

npm i vite-plugin-imagemin -D

import viteImagemin from 'vite-plugin-imagemin';
export default defineConfig({
  plugins: [
    viteImagemin({
      gifsicle: { optimizationLevel: 7, interlaced: false },
      optipng: { optimizationLevel: 7 },
      mozjpeg: { quality: 20 },
      pngquant: { quality: [0.8, 0.9], speed: 4 },
      svgo: { plugins: [{ name: 'removeViewBox' }, { name: 'removeEmptyAttrs', active: false }] }
    })
  ]
});

Reducing Cyclomatic Complexity

Enforce ESLint rule complexity with a maximum of 10, refactor large functions, extract utilities, and simplify conditional logic as shown in the visual reports.

Reducing Duplicate Code

Identify duplicated blocks via Jscpd reports and consolidate them into shared utilities or components, also merging common styles where possible.

Results

Bundle size decreased from 16.37 MB to 12.94 MB.

Full page load time reduced from 1.9 s to 912 ms.