Boost Vue App Performance: Practical Code, Webpack, and Web Techniques

Introduction

Vue’s data binding and virtual DOM relieve most DOM work, but projects still need performance tuning such as first‑screen speed, webpack configuration, and basic web techniques.

1. Code‑level Optimizations

1.1 Distinguish v‑if and v‑show

v‑if performs true conditional rendering and is lazy; v‑show always renders the element and toggles CSS display, suitable for frequent toggles.

1.2 Use computed vs watch appropriately

computed provides cached derived values and should be used for pure calculations; watch observes data changes and is ideal for asynchronous or heavy side‑effects.

1.3 Add key to v‑for items and avoid v‑if on the same element

Providing a unique key lets Vue efficiently diff lists; placing v‑if on a v‑for element prevents optimal diffing.

1.4 Freeze large static data

For long lists that never change, freeze the source object with Object.freeze to skip Vue’s reactivity.

1.5 Clean up manually added listeners

Vue destroys component‑scoped listeners automatically, but listeners added via addEventListener must be removed in beforeDestroy to avoid memory leaks.

1.6 Image lazy loading

Install vue‑lazyload, register it in main.js, and replace src with v‑lazy to defer off‑screen images.

1.7 Route lazy loading

Use dynamic imports, e.g. const Foo = () => import('./Foo.vue'), and configure VueRouter to load route components on demand.

1.8 On‑demand third‑party components

Leverage babel-plugin-component to import only needed parts of UI libraries such as Element‑UI.

1.9 Optimize infinite lists

Apply windowing libraries like vue‑virtual‑scroll‑list or vue‑virtual‑scroller to render only visible items.

1.10 Server‑side rendering (SSR) and pre‑rendering

SSR improves SEO and first‑paint speed but adds server load; for a few static pages, pre‑rendering with prerender‑spa‑plugin is sufficient.

2. Webpack Optimizations

2.1 Image compression

Use image‑webpack‑loader in webpack.base.conf.js to compress large images.

2.2 Reduce Babel helper duplication

Install babel‑plugin‑transform‑runtime and enable it in .babelrc so helpers are imported once instead of inlined.

2.3 Extract common code

Configure CommonsChunkPlugin to bundle vendor libraries and manifest separately.

2.4 Template pre‑compilation

Use single‑file components or vue‑template‑loader so templates are compiled to render functions at build time.

2.5 Extract component CSS

Extract CSS into a separate file to avoid runtime injection and improve caching.

2.6 SourceMap tuning

Use cheap-module-eval-source-map for development and cheap-module-source-map for production to balance speed and detail.

2.7 Bundle analysis

Integrate webpack‑bundle‑analyzer in webpack.prod.conf.js to visualize module sizes.

3. Basic Web‑Technology Optimizations

3.1 Enable gzip compression

Install compression middleware in Express and call app.use(compression()) to serve gzipped responses.

3.2 Browser caching

Set appropriate HTTP cache headers (strong vs weak validation) to let browsers reuse static assets.

3.3 Use a CDN

Offload CSS, JS, and image delivery to a CDN to increase parallel connections and reduce latency.

3.4 Chrome Performance panel

Record and analyze JavaScript execution and rendering timelines to locate bottlenecks.

Conclusion

The article groups Vue code‑level, webpack configuration, and fundamental web techniques into three parts, providing practical steps to improve Vue project performance.