1, Reason:
The html of a single page application is generated by JS. Because the first screen needs to load a large number of JS files (app.js and vendor.js), there will be a certain degree of white screen when the network speed is poor
2, Solution:
1. Route lazy loading, component lazy loading
1. Route lazy loading
// 1. Vue asynchronous component technology:
{
path: '/home',
name: 'Home',
component: resolve => require(['../views/home.vue'], resolve)
}
// 2. Import of es6 proposal
{
path: '/',
name: 'home',
component: () => import('../views/home.vue')
}
// 3. Require. Provided by webpack ensure()
{
path: '/home',
name: 'Home',
component: r => require.ensure([],() => r(require('../views/home.vue')), 'home')
}
2. Lazy loading of components
components:{
"dailyModal":()=>import("./dailyModal.vue")
},
components:{
"dailyModal":resolve=>require(['./dailyModal.vue'],resolve)
},
2. CDN resource optimization
The full name of CDN is Content Delivery Network, that is, content distribution network. CDN is a content distribution network built on the network. Relying on the edge servers deployed everywhere, through the load balancing, content distribution, scheduling and other functional modules of the central platform, CDN enables users to obtain the required content nearby, reduce network congestion, and improve user access response speed and hit rate. The key technologies of CDN mainly include content storage and distribution technology.
As the project becomes larger and larger, more and more third-party npm packages are relied on, and the files after construction will become larger and larger. In addition, it is a single page application, which will lead to a long white screen when the network speed is slow or the server bandwidth is limited. At this time, we can use the CDN method to optimize the network loading speed.
1. The vue, vue router, vuex, axios and other vue family resources are all obtained through the CDN link in the index Insert the corresponding link in HTML.
<body> <div id="app"></div> <script src="https://cdn.bootcss.com/vue/2.6.10/vue.min.js"></script> <script src="https://cdn.bootcss.com/axios/0.19.0-beta.1/axios.min.js"></script> <script src="https://cdn.bootcss.com/vuex/3.1.0/vuex.min.js"></script> <script src="https://cdn.bootcss.com/vue-router/3.0.2/vue-router.min.js"></script> <script src="https://cdn.bootcss.com/element-ui/2.6.1/index.js"></script> </body>
2. In Vue config. JS configure externals attribute
module.exports = {
ยทยทยท
externals: {
'vue': 'Vue',
'vuex': 'Vuex',
'vue-router': 'VueRouter',
'axios':'axios'
}
}
3. Uninstall dependent npm packages
npm uninstall vue vue-router vuex axios
3. gZip accelerated optimization
All modern browsers support gzip compression. Enabling gzip compression can significantly reduce the size of transmission resources, so as to shorten the resource download time, reduce the first white screen time and improve the user experience.
gzip has the best compression effect on files based on text format (such as CSS, JavaScript and HTML). When compressing large files, it can often achieve a compression rate of up to 70-90%. gzip compresses the compressed resources (such as pictures), and the effect is very poor.
const CompressionPlugin = require('compression-webpack-plugin')
configureWebpack: (config) => {
if (process.env.NODE_ENV === 'production') {
config.plugins.push(
new CompressionPlugin({
// gzip compression configuration
test: /\.js$|\.html$|\.css/, // Match file name
threshold: 10240, // Compress data exceeding 10kb
deleteOriginalAssets: false, // Delete original file
})
)
}
}
4,vue. config. Closing the map file in JS can reduce a lot of map files
productionSourceMap is used to locate the code location when an error is reported.
If you don't want others to see the source code, you can set it to false, reduce the volume of the package after packaging, and encrypt the source code.
productionSourceMap: false,
5. SSR, server-side rendering, and assemble the html required for the home page on the server-side in advance
6. Home page plus loading or skeleton screen (optimize experience)
With the gradual popularity of SPA in the front-end community, single page applications inevitably bring pressure to the home page loading. At this time, a good home page user experience is very important. Many apps use a "skeleton screen" to display unloaded content, giving users a new experience.
The so-called skeleton screen is to use some graphics to occupy the space when the page content is not loaded, and then replace it after the content is loaded. In this process, users will feel that the content is gradually loading and about to be presented, reducing the bad experience of "white screen".
Skeleton screen