Home > Web Front-end > JS Tutorial > body text

How Vue uses CDN to optimize the speed of first screen loading

php中世界最好的语言
Release: 2018-04-08 15:57:35
Original
2583 people have browsed it

This time I will show you how Vue uses CDN to optimize the loading speed of the first screen. What are the precautions for Vue to use CDN to optimize the loading speed of the first screen. The following is a practical case, let's take a look.

Preface

As a website application, loading speed is very important. Loading speed, one is the reasonable arrangement of the program, such as on-demand loading of components, and the other is the asynchronous loading of js, css and other resources.

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 referenced and not compile them into vendor.js. Instead, they are referenced in the form of resources, so that the browser can use multiple A thread asynchronously loads vendor.js, external js, etc. to speed up the initial opening.

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

Below, take the introduction of vue, vuex, and vue-router as an example to explain 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>
Copy after login

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'
 }
Copy after login

Note:

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

3. Remove the original reference

Remove the import, such as:

// import Vue from 'vue'
// import Router from 'vue-router'
Copy after login

Remove Vue.use(XXX), such as:

// Vue.use(Router)
Copy after login

I believe you have mastered the method after reading the case in this article. Please pay attention for more exciting things. Other related articles on php Chinese website!

Recommended reading:

How to submit data in JSON format to the server

How to learn vue for beginners

How to deal with repeated binding when JS is dynamically loaded

The above is the detailed content of How Vue uses CDN to optimize the speed of first screen loading. For more information, please follow other related articles on the PHP Chinese website!

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template