First screen loading optimization after vuejs project packaging is completed

This time I will bring you the first screen loading optimization after the vuejs project is packaged. What are the precautions for the first screen loading optimization after the vuejs project is packaged. The following is a practical case, let's take a look.

1: Using CDN resources

When we package, we will package.json, dependencies Object The plug-ins are packaged. 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 do this:

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

Summary

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!

Recommended reading:

vue implements reducing the number of requests to the server

How vue uses caching

The above is the detailed content of First screen loading optimization after vuejs project packaging is completed. For more information, please follow other related articles on the PHP Chinese website!