1. Reason:
The html of a single page application is generated by js, because the first screen needs to load a large js file (app.js and vendor.js), so when the network speed is poor, a certain degree of white screen will be generated
2. Solution:
1. Lazy loading of routing and components
1. Route lazy loading
// 1、Vue异步组件技术：
{
path: '/home',
name: 'Home',
component: resolve => require(['../views/home.vue'], resolve)
}
// 2、es6提案的import()
{
path: '/',
name: 'home',
component: () => import('../views/home.vue')
}
// 3、webpack提供的require.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 delivery network. CDN is a content distribution network built on the network, relying on edge servers deployed in various places, through the load balancing, content distribution, scheduling and other functional modules of the central platform, so that users can 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 gets bigger and bigger, more and more third-party npm packages are relied on, and the files after the build will get bigger and bigger. Coupled with a single-page application, this will result in a long-term 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. Change all the resources of vue family bucket such as vue, vue-router, vuex, and axios to obtain through CDN link, and insert the corresponding link in index.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. Configure the externals property in vue.config.js
module.exports = {
···
externals: {
'vue': 'Vue',
'vuex': 'Vuex',
'vue-router': 'VueRouter',
'axios':'axios'
}
}
3. Uninstall related dependent npm packages
npm uninstall vue vue-router vuex axios
3. gZip acceleration optimization
All modern browsers support gzip compression. Enabling gzip compression can greatly reduce the size of transmission resources, thereby shortening resource download time, reducing the time for the first white screen, and improving user experience.
gzip has the best compression effect on text-based files (such as CSS, JavaScript, and HTML). It can often achieve a compression rate of up to 70-90% when compressing larger files. For resources that have been compressed (such as pictures) The effect of gzip compression is very bad.
const CompressionPlugin = require('compression-webpack-plugin')
configureWebpack: (config) => {
if (process.env.NODE_ENV === 'production') {
config.plugins.push(
new CompressionPlugin({
// gzip压缩配置
test: /\.js$|\.html$|\.css/, // 匹配文件名
threshold: 10240, // 对超过10kb的数据进行压缩
deleteOriginalAssets: false, // 是否删除原文件
})
)
}
}
4. Close the map file in vue.config.js, which can reduce a lot of map files
productionSourceMap is used to locate the code position when reporting an error
productionSourceMap: false,
5. SSR, server-side rendering, pre-assemble the html required for the homepage on the server-side
6. Add loading or skeleton screen to the homepage (optimized experience)
With the gradual popularity of SPA in the front-end industry, single-page applications inevitably put pressure on the loading of the homepage. At this time, a good homepage user experience is crucial. Many apps use a "skeleton screen" method to display unloaded content, giving users a completely new experience.
The so-called skeleton screen is to use some graphics to take place when the page content is not loaded, and then replace it after the content is loaded. In this process, users will perceive that the content is gradually loading and will soon be presented, reducing the bad experience of "white screen".
https://segmentfault.com/a/1190000020124630?utm_source=tag-newest