Why use CDN

When a Vue project is packaged, the default is to combine all the code to produce a new file, including various libraries, resulting in a large package. If using CDN, it will be more conducive to the loading speed of the program.

In the Vue project, all JS and CSS files introduced into the project are packaged into Vendor.js at compile time, and the browser can display the first screen only after loading the file. If there are many libraries introduced, the vendor.js file size will be quite large, affecting the initial experience.

The solution

The referenced external JS and CSS files are detached and referenced in the form of resources rather than compiled into Vendor.js. In this way, the browser can load vendor.js and external JS asynchronously using multiple threads to accelerate the initial opening.

External library files, can use CDN resources, or other server resources, etc.

Using CDN mainly solves two problems

  1. Too long packaging time, too large volume of packaged code, slow request
  2. The server network is unstable and bandwidth is not high. CDN can avoid the problem of server bandwidth

Specific steps

The following describes the process of importing vUE, VUex, and VUE-Router.

Resources to introduce

1. Import the project using the CDN node in the root directory index. HTML
<body>
    <div id="app"></div>
    <! -- built files will be auto injected -->
    <! -- Development environment -->
    <script src="https://cdn.bootcss.com/vue/2.6.11/vue.js"></script>
    <! -- Production environment -->
    <! -- < script SRC = "https://cdn.bootcss.com/vue/2.6.11/vue.min.js" > < / script > -- >
    <! -- Introducing a component library -->
    <script src="https://cdn.bootcss.com/vue-router/3.2.0/vue-router.min.js"></script>
    <script src="https://cdn.bootcss.com/axios/0.23.0/axios.min.js"></script>
    <script src="https://cdn.bootcss.com/element-ui/2.15.6/index.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/moment.js/2.29.1/moment.min.js"></script>
</body>
Copy the code
2. Add the externals external extension to vue.config.js
configureWebpack: {
    externals: {
        "vue": "Vue"."vue-router": "VueRouter"."axios": "axios"."moment": "moment"."element-ui": "ELEMENT",}},Copy the code

Here’s what the externals configuration option does:

If we want to reference a library, but don’t want webpack to be packaged, and don’t want to use it globally in programs like CMD, AMD, or Window /global, we can configure externals.

Note: Element – UI should be capitalized as Element

3. Remove references

If I don’t delete the originalimport, the project will still be fromnode_modulesTo import resources.

Which means if I don’t delete it,npm run buildThe referenced resources are still packaged together, making the generated file much larger. So I think it’s better to delete it

Packaging contrast

The introduction ofnode_modulesYou can see that the proportion of element and moment is large

CDNIntroduction module:To be able to seevendor.jsThere are far fewer files and packaging is much faster

Problem sets

Vue-cli 4 Use Report to analyze vendor.js

Vue The webpack volume optimization tool delivered with the Cli (@/ Vue/Cli) allows you to view the size of each module for easy optimization. Just add the –report parameter after build.

1. We configure the commands in package.json
"scripts": {
  "serve": "vue-cli-service serve"."build": "vue-cli-service build"."report": "vue-cli-service build --report"  // Join the line
},
Copy the code

Execute the NPM Run Report package and generate the report. Note: The webPack-bundle-Analyzer package does not need to be installed before it is said to be installed.

1. After running NPM run report, a report. HTML will be generated in dist directory at the same time as build