Why is my phone a black and white? APP is not your problem? ? ? - by anonymity user feedback
Currently, our team h5 mobile terminal project are using vue2.0 framework for the development, due to the characteristics of the SPA, leading to home when loaded will be slightly slower than usual page load speed, in extreme cases, poor network may cause similar
cases page black and white, it will affect the user experience, our team used a variety of ways, brains, hair fall, was finally able to control under normal circumstances wifi Home loading speed <1s, I am responsible to take the following project about the
optimization of the project description:
1.vue routing lazy loading
the official online face a note, a direct follow suit on the line (https://router.vuejs.org/zh/guide/advanced/lazy-loading.html)
2. Home resource load control
this means that the home must be controlled resource loading to achieve on-demand loading, routing the home including your home page and index.html file. Routing page as concisely as possible, all recommended icon used use it
(https://tinypng.com/) compression that, if home use components, use the component asynchronous loading. index.html file inside do not need to clean out all of the resources, we have the project done in index.html in
the whole mobile platform compatible logic here will use resources dynamically loaded, it will eventually provide a simple method for dynamic loading:
3. The components used in dynamic loading page
Import orderRuleText from "@ / Components / orderRule.vue"
Export {default
name: "orderCreat",
Components: {
orderRuleText: orderRuleText
}
}
4. Turn Gzip compression
details, please Baidu, attention turned compression project to be installed compression-webpack-plugin plugin to run properly
5. Home Home GIF or pre-rendered transition diagram
of these two methods are the method can prompt the user experience, using the principles are the same, vue start of the project to find the div id = app and content in the index.html into mount , the project has not started before the index.html div. # app this element
will post content will be displayed to the user to view, then we can be a relatively small GIF or piece of content on the map here, the project started automatically cleared. In fact, our team has several projects have adopted the home pre-rendered the way, but I
personally feel now the way there is a huge flaw and earnings tiny, so I am responsible for projects not yet adopted Home preloaded, I personally recommend the use of GIF diagrams transition
6. Server Rendering (SSR)
to solve the problem of the ultimate solution, but not suitable for our project, it is not enabled
// Dynamic loading follows
// dynamically loaded executable file js callback function, the dynamic callback since loading css file loaded determination logic huge differences between the browser and logic complexity, on hold
type // = 1 css, type = 2 is js, source resource is loaded url, callback function of the callback
function dynamicLoadResources (type, Source, callback) {
IF (! Source || source.length === 0) {
the throw new new Error ( 'Dynamic Load Resources need Resources');
}
var = document.getElementsByTagName head ( 'head') [0]
IF (type ==. 1) {
var = document.createElement Link ( 'Link')
link.href = Source
Link. = the rel 'this stylesheet'
link.type = 'text / CSS'
head.appendChild (Link)
} the else IF (type == 2) {
var Script = document.createElement ( 'Script')
Script.src = source
script.type = 'text/javascript'
head.appendChild(script)
script.onload = callback
}
}