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

1: Elements surrounded by keep-alive cannot Reason for displaying

: Unknown.

Solution: No need to keep-alive

Recommended reading: Vue project uses CDN to optimize first screen loading problem

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

Recommended reading:

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!