How the Frontend Can Elegantly Use a CDN to Optimize Site Speed

Preface

A recent frontend project ran into performance optimization requirements, and the biggest controllable factor was the bundle size after webpack packaging; even after using many plugins to optimize the size, some core packages were still very large (Vue, Bootstrap, etc.), so I thought of using a CDN to optimize. Below are notes after the demo.

Why does using a CDN improve page speed?

On one hand, you can look at it through JS bundle size (a plain demo created by vue-cli):

The bundle size when vue-cli builds directly:
When building, do not bundle the vue module — import it via CDN instead.
- Add Vue’s CDN into index.html.
- Add externals in vue.config.js as follows:
```
module.exports = defineConfig({
	transpileDependencies: true,
	configureWebpack: {
		externals: {
		vue: "Vue",
	},
	},
});
```

After building, you can see the overall size has been greatly reduced:

Besides bundle size, on the other hand, you can also look at it from the TCP perspective. Google Chrome browser limits a single domain to 6 simultaneous TCP connections; if the enterprise host has to send a lot of JS and CSS resources to the client side, it will hit this limit and increase the resource loading time; but if some resources are placed on a CDN, you can “enjoy” another 6 TCP connections on that CDN, without resource loading being throttled!

Exporting Vue

First, we export the Vue package we want to put on the CDN!

The laziest way is of course to go to the official site, copy the source code from the official CDN, and upload it to your own CDN site.

But considering that future versions may be updated, the most reliable way is to clone the official github repo and build it yourself, so you can choose which version to export by switching branches.

From the source code’s directory structure, you can see that vue/core is a monorepo written with pnpm. To use it, you must first globally install pnpm on your local machine (the prompt will say the node environment must be 16+), then run pnpm install. After all node_modules are installed, you can run npm run build.

After it is done, you can see the packaged file under /packages/vue/dist.

How to Build a Private CDN with Enterprise GCP

However, if everything uses official or open-source CDNs, there is still some risk, such as the official upgrading to a version that does not match your project, or the CDN going down — for an enterprise this could be a net loss; therefore, putting some large and core modules on a private CDN site is a more reliable approach.

Take GCP as an example: we will need CloudStorage, CloudCDN, and LoadBalance to build the CDN for the enterprise. In short, put the resources under CloudStorage, then configure the CDN site through CloudCDN, and use LoadBalance to set up the connection.

Configure CloudStorage

Upload the resources to CloudStorage. Tentatively name it vue3.
Upload the dist folder we just built.
Then set the access permissions for the resources, so they can be accessed via the CDN.

Configure CloudCDN

Add a new CDN origin, then set Add backend bucket to the vue3 CloudStorage we configured above.
For the next options, you can either add a new LoadBalance or use an existing one.

Get the CDN URL from LoadBalance

Enter this IP address in the browser,

and you can see the dist directory we just uploaded:

The resource we want is /dist/vue.global.js — let’s also confirm it in the browser:

Looks good. After importing it into the project and confirming there are no issues, a minimal private Vue CDN site is complete!

ChangeLog

20221227-init
20260501–translate by claude code

[Frontend Note] How Frontend Sets Up a Private CDN Site

Use an enterprise private CDN to optimize page speed and security