After nearly a year of front-end development work, I found that front-end is not ok as I once imagined, especially in 2020, if I can only write business things, I believe it is inevitable to be eliminated. Of course, there is no end to learning, there are many things to learn, data structure, algorithm, network, project optimization and so on. Today we are going to talk about a small front-end optimization thing – the CONFIGURATION of THE CDN.

What is a CDN?

Let’s take a look at baidu Baike’s explanation: “THE full name of CDN is Content Delivery Network. CDN is an intelligent virtual network built on the basis of the existing network. It relies on the edge servers deployed in various places, through the central platform of load balancing, content distribution, scheduling and other functional modules, users can get the content nearby, reduce network congestion, and improve user access response speed and hit ratio. The key technologies of CDN are content storage and distribution.”

Let me explain it in plain English: some resources will be placed on many servers, and CDN will let our requests be obtained nearby. To put it more simply, like JINGdong Mall, the platform will deliver goods to you from the nearest warehouse.

Vue+Typescript

In fact, many people know that TS is a trend, so much so that the source code of VUe3.0 is also written in TS. We can also choose TS when building projects with the latest VUE scaffolding

Take Echarts as an example to talk about CDN introduction and configuration

Baidu tutorial a lot of, but the majority of the search to only the first two steps, often a lot of people easy to ignore is the third step, special reminder, do not need to do any introduction operation in main.ts.

// public/index.html
<script src="https://cdn.bootcss.com/echarts/3.7.2/echarts.min.js"></script>

// vue.config.js
module.exports = {
configureWebpack: {
externals: {
'echarts': 'echarts'// Configure the use of CDN}}} // need to introduce. Vue file, also many people ignore the step <script lang="ts">
declare letEcharts: any... </script>Copy the code

Why CDN

As a bonus, all packages under node_module are packaged into a file called chunk-vendors.[hash].js if no configuration is done.

Let’s take a look at one of my projects, running NPM Run build

(Through CDN)