SoFunction
Updated on 2025-03-10

Vue uses CDN to reference project components and steps to reduce project volume

After the Vue project is packaged, some files are often hundreds of KB or several M, which is undoubtedly fatal to load a front-end project. When your server is deployed on Alibaba Cloud or Amazon, and only has 100kb loading speed per second, the loading speed of the page will definitely crash you. So is there any way to make our page faster at a loading speed of 100kb/s? CDN is one of the solutions.

First, we need to understand why the files generated by my Vue project are so large after packaging. When we first used Vue, we would put almost all references to components and plug-ins in the project main file to make it into the file. Our reference method might be like this:

import Vue from 'vue'
import App from './App'
import Router from 'vue-router'
import ElementUI from 'element-ui'
import axios from 'axios'
import 'element-ui/lib/theme-chalk/'
import cookies from 'vue-cookies'
import qs from 'qs'
import store from './store'

When the project is packaged, it will automatically search for dependencies and enter all dependencies into the project. It is the existence of these dependencies that leads to the size of the entire project file. But dependent files are necessary, and it is impossible to delete dependent files. The emergence of CDN provides a solution to the above situation.

The full name of CDN is Content Delivery Network, which is the content distribution network. CDN is an intelligent virtual network built on the basis of the existing network. Relying on edge servers deployed in various places, the central platform's load balancing, content distribution, scheduling and other functional modules enable users to obtain the required content nearby, reduce network congestion, and improve user access response speed and hit rate.

Using CDN in Vue is equivalent to handing over the dependent files that you originally need to download for your project to the user's network for download. In Vue, only the reference to the dependent files is maintained. There are two main things that need to be changed, one is Vue and the build directory. Without further ado, please add the code:

<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width,initial-scale=1.0">
 <title>Demo index html</title>
 <link rel="stylesheet" href="/npm/[email protected]/lib/theme-chalk/" rel="external nofollow" >
</head>
<body>
<div ></div>
<!-- built files will be auto injected -->
<script src="/npm/[email protected]"></script>
<script src="/npm/[email protected]"></script>
<script src="/npm/[email protected]"></script>
<script src="/npm/[email protected]/lib/"></script>
</body>
</html>

The referenced resource file Url is divided into several parts:

Part One:/npmSpecify the current resource download site, similar to itUNPKG、、BootCDNwait. Personally recommendedjsdelivr, relatively stable speed

Part 2: The package name to be referenced, such as: vue, vue-route, element-ui

Part 3: Specific reference to the version number or specific file of the dependency, such as: @2.6.0,@2.12.0/lib/ This part is an optional part

CSS files can also be referenced using cdn

After the above configuration is completed, you need to modify the build/file:

'use strict'
const path = require('path')
const utils = require('./utils')
const config = require('../config')
const vueLoaderConfig = require('./')

function resolve(dir) {
 return (__dirname, '..', dir)
}


 = {
 externals:{
 'vue':'Vue',
 'element-ui':'ELEMENT',
 'vue-router':'VueRouter',
 "moment": "moment",
 "md5": "js-md5"
 },
 context: (__dirname, '../'),
 entry: {
 app: './src/'
 },
 output: {
 path: ,
 filename: '[name].js',
 publicPath: .NODE_ENV === 'production'
 ? 
 : 
 },

If there is no code marked with the code, please insert it. In externals configuration, such as Vue, ELEMENT, VueRouter, are fixed writing methods. Webpack will automatically find relevant dependencies based on these characters and introduce them.

After modifying the above files, you still need to modify the applications of these files:

import Vue from "vue";
import App from "./App";
import router from "VueRouter";
import cookies from "vue-cookies";
import VueAxios from "vue-axios";
import axios from "axios";//elementUINo citation required，If you need to use the relevant code, please useELEMENTInstead of：const Message = ;

At this point, all configurations are completed. It should be noted that after using CDN, users will request the configured CDN file when accessing your page. Therefore, it is very important to choose a fast and stable CDN site; and not all dependent files can be referenced in this way. Some components will not export objects, which means that CDN cannot be used to complete the use.

The above is the detailed content of Vue's steps to use CDN to reference project components and reduce project volume. For more information about vue's reduction project volume, please pay attention to my other related articles!