Vuejs project packaging and first screen loading optimization

This time I will bring you vuejs project packaging and first-screen loading optimization. What are the precautions for vuejs project packaging and first-screen loading optimization? The following is a practical case, let’s take a look.

1: Using CDN resources

When we package, we will package.json, dependenciesPlugins are packaged in objects. We can load some of them using cdn. For example, if we don’t want to package vue, axios, vuex, and vue-router into our project, we need to This way:

1: Open webpack.base.conf.js

module.exports = {
   externals: {
    ‘vue‘: ‘Vue‘,
    ‘axios‘: ‘axios‘,
    ‘vuex‘: ‘Vuex‘,
    ‘vue-router‘: ‘VueRouter‘
 }
}

2: Open router/index.js. Log out the following two lines

//import Vue from ‘vue‘
//Vue.use(Router)

3: If you use vuex, log out Vue.use(Vuex) in vuex/index.js (named differently)

Vue.use(Vuex)

##Possible problems after packaging

vue reduces the number of requests to the server

What are the ways vue-cli can shorten the first screen loading time

The above is the detailed content of Vuejs project packaging and first screen loading optimization. For more information, please follow other related articles on the PHP Chinese website!