The second way to write it
constIndex = () =>import(/* webpackChunkName: “group-home” */’@/views/index’) const routers = [ { path: ‘/’, name: ‘index’, component: Index } ]
The third way to write it
const Index = r =>require.ensure([], () => r(require(‘./views/index’)), ‘group-home’); constrouters = [ { path: ‘/’, name: ‘index’, component: Index } ]
2. The referenced external JS and CSS files are detached and referenced in the form of resources rather than compiled into Vendor. js. In this way, the browser can load vendor.js and external JS asynchronously using multiple threads to accelerate the initial launch.
External library files, can use CDN resources, or other server resources, etc.
The following describes the process of importing vUE, VUex, and VUE-Router
I. Introduction of resources
In index.html, add CDN resources, such as those on bootstrap:
<body>
<div id=”app”></div>
< 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 the configuration
In bulid/webpack base. Conf. Js file, increase the externals, refer to external module import, as follows:
module.exports = {
entry: {
app: ‘./src/main.js’
},
externals:{
‘vue’: ‘Vue’,
‘vue-router’: ‘VueRouter’,
‘vuex’:’Vuex’
}
Three, remove the original reference
Drop import, as in:
// import Vue from ‘vue’
// import Router from ‘vue-router’
Vue. Use (XXX)
// Vue.use(Router)
Finally, after NPM run build is restarted, the volume of Vendor. js is reduced. After all external modules are introduced by CDN, files such as vue.js, vuex.js and vendor.js will be loaded by one thread respectively through the Network tool of developer mode. And because the CDN is used, the bandwidth pressure is reduced
3. Open gzip compression, who uses who knows, open gzip compression after vender.js directly compressed half, greatly improve the first screen loading speed, have to be really very powerful!
4. Lazy image loading, reduce HTTP requests, on-demand import, asynchronous loading, preloading and so on can optimize the slow loading speed of the first screen
Above is my solution to the slow loading of the first screen of Vue, of course, there are other better solutions, also hope you front-end god more advice!