Home > Article > Web Front-end > How Vue uses CDN to optimize first screen loading

How Vue uses CDN to optimize first screen loading

php中世界最好的语言Original: 2018-04-11 13:49:163513browse

This time I will show you how Vue uses CDN to optimize first-screen loading. What are the precautions for Vue to use CDN to optimize first-screen loading. Here is a practical case, let’s take a look.

In the Vue project, all js and css files introduced into the project will be packaged into vendor.js during compilation. The browser can only start to display the first screen after loading the file. If many libraries are introduced, the size of the vendor.js file will be quite large, affecting the initial opening experience.

The solution is to separate the external js and css files that refers to and not compile them into vendor.js. Instead, they are referenced in the form of resources, so that the browser can use multiple threads to asynchronously compile vendor.js. js, external js, etc. are loaded to achieve the purpose of accelerating the first opening.

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

Next, take the introduction of vue, vuex, and vue-router as an example to illustrate the processing flow.

1. Resource introduction

In index.html, add CDN resources, such as bootstrap:

<body>
  <p id="app"></p>
  <script src="https://cdn.bootcss.com/vue/2.5.2/vue.min.js"></script>
  <script src="https://cdn.bootcss.com/vue-router/3.0.1/vue-router.min.js"></script>
  <script src="https://cdn.bootcss.com/vuex/3.0.1/vuex.min.js"></script>
 </body>

2. Add configuration

In the bulid/webpack.base.conf.js file, add externals and import the referenced external modules, as follows:

module.exports = {
 entry: {
  app: './src/main.js'
 },
 externals:{
  'vue': 'Vue',
  'vue-router': 'VueRouter',
  'vuex':'Vuex'
 }

Note:

## The format is 'aaa' : 'bbb', where aaa represents the name of the resource to be imported, and bbb represents the name provided by the module for external references, which is customized by the corresponding library. For example, vue is Vue, vue-router is VueRouter.

3. Remove original references

Remove the import, such as:

// import Vue from 'vue'
// import Router from 'vue-router'

Remove Vue.use(XXX), such as:

// Vue.use(Router)

Test

Re-npm run build, you will see that the size of vendor.js has decreased. Through the developer mode Network tool, you can see that files such as vue.js, vuex.js, vendor.js, etc. are loaded by one thread respectively. And because of the use of CDN, the loading speed is faster than your own server.

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the php Chinese website!

How Vue uses CDN to optimize first screen loading

Related articles