Of Stack

Vue Reference Project Components Using CDN Steps to Reduce Project Volume

  • 2021-09-11 19:24:51
  • OfStack

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

First, we need to understand why my Vue project produces files that are so large when packaged. When we first used Vue, almost all components and plug-ins were referenced in the main project file, that is, main. js file. Our reference method may be as follows: 


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/index.css'
import cookies from 'vue-cookies'
import qs from 'qs'
import store from './store'

When the project is packaged, it will automatically find dependencies and enter all dependency files into the project. It is the existence of these dependency files that leads to the bulky volume of the whole project file. However, dependent files are necessary, and it is impossible to delete dependent files. The emergence of CDN provides a solution for the above situation.

The full name of CDN is Content Delivery Network, that is, content distribution network. CDN is an intelligent virtual network based on the existing network. It relies on edge servers deployed in various places, and enables users to obtain the required content nearby through the functional modules such as load balancing, content distribution and scheduling of the central platform, thus reducing network congestion and improving the response speed and hit rate of users.

The use of CDN in Vue is equivalent to downloading the dependent files needed by the original project to the user's network, while the reference to the dependent files can be kept in Vue. There are two main places that need to be changed. One is index. html of Vue, and webpack. base. conf. js under build directory. Needless to say, the code is as follows: 


<!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="https://cdn.jsdelivr.net/npm/element-ui@2.12.0/lib/theme-chalk/index.css" rel="external nofollow" >
</head>
<body>
<div id="app"></div>
<!-- built files will be auto injected -->
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.0"></script>
<script src="https://cdn.jsdelivr.net/npm/vue-router@3.1.3"></script>
<script src="https://cdn.jsdelivr.net/npm/js-md5@0.7.3"></script>
<script src="https://cdn.jsdelivr.net/npm/element-ui@2.12.0/lib/index.js"></script>
</body>
</html>

The referenced resource file Url is divided into several parts:

Part 1: https://cdn.jsdelivr.net/npm specifies the current resource download site, and similarly, UNPKG, cdnjs, com, BootCDN and so on. Personally, it is recommended to use jsdelivr, and the speed is relatively stable

Part 2: Package names to be referenced, such as vue, vue-route, element-ui

Part 3: Specific references to dependent version numbers or specific files, such as @ 2.6. 0, @ 2.12. 0/lib/index. js This section is optional

css files can also be referenced using cdn

After the above configuration is completed, you also need to modify the build/webpack. base. conf. js file: 


'use strict'
const path = require('path')
const utils = require('./utils')
const config = require('../config')
const vueLoaderConfig = require('./vue-loader.conf')

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


module.exports = {
 externals:{
 'vue':'Vue',
 'element-ui':'ELEMENT',
 'vue-router':'VueRouter',
 "moment": "moment",
 "md5": "js-md5"
 },
 context: path.resolve(__dirname, '../'),
 entry: {
 app: './src/main.js'
 },
 output: {
 path: config.build.assetsRoot,
 filename: '[name].js',
 publicPath: process.env.NODE_ENV === 'production'
 ? config.build.assetsPublicPath
 : config.dev.assetsPublicPath
 },

If there is no code for the labeled part, please insert it. In the externals configuration, such as Vue, ELEMENT, VueRouter are all fixed, and webpack will automatically find related dependencies according to these characters and introduce them

After modifying the above files, you also need to modify the application of these files in main. js: 


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";//elementUI You don't need to refer to it. If you need to use related code, please use ELEMENT Instead of: const Message = ELEMENT.Message;

At this point, the configuration is complete. It should be noted that after using CDN, users will request the configured CDN file when visiting your page, so it is important to choose a fast and stable CDN site 10 points; Also, not all dependent files can be referenced in this way, and some components will not export objects, which means that CDN cannot be used.

The above is Vue using CDN reference project components, reduce the project volume of the details of the steps, more information about vue reduce the project volume please pay attention to other related articles on this site!

Related articles: