Component optimization
In general, you don’t need to worry too much about the runtime performance of vue, which is very fast at run time, but at the cost of relatively slow initialization. Let’s take a look at the common way vUE is written: put an app component in the HTML, and the app component references other sub-components, forming a tree of components with the app as the root node.
<div id="app">
<router-view></router-view>
</div>
Copy the codeIt is this practice that causes performance problems. To initialize a parent component, it must first initialize its children, which in turn have their own children. To initialize the root tag, you need to start bubbling from the bottom up and initialize all the components of the page. So our page will not be displayed until all components are initialized.
This is obviously not what we want. A better result is that the page can be streamed from top to bottom in order, which may increase the overall time, but reduces the first screen time, which makes the page open faster in the user’s mind.
Asynchronous components
new Vue({
components: {
A: { /*component-config*/ },
B (resolve) {
setTimeout(() => { resolve({ /*component-config*/ }) }, 0); }}})Copy the codeOr is it
Const Foo = resolve => {// require. Ensure is a Webpack special syntax for setting code-split point // (code blocks) require. Ensure (['./Foo.vue'], () => {
resolve(require('./Foo.vue'))
})
}
const Foo = resolve => require(['./Foo.vue'], resolve)
const router = new VueRouter({
routes: [
{ path: '/foo', component: Foo }
]
})
Copy the codeComponents corresponding to different routes are divided into different code blocks, and then the corresponding components are loaded when the route is accessed, thus realizing lazy route loading
Divide the components into components
Sometimes we want to bundle all components under a route into the same asynchronous chunk. Simply name the chunk, providing the third argument require. Ensure as the name of the chunk:
const Foo = r => require.ensure([], () => r(require('./Foo.vue')), 'group-foo')
const Bar = r => require.ensure([], () => r(require('./Bar.vue')), 'group-foo')
const Baz = r => require.ensure([], () => r(require('./Baz.vue')), 'group-foo')
Copy the codeSo v-if and terminal
<head> <! --some component --> <div v-if="showB"> <! --some component --> </div> <div v-if="showC"> <! --some component --> </div> </head> data: { showB:false,
showC: false
},
created() {// display BsetTimeout(() => {
this.showB = true; }, 0); / / show CsetTimeout(() => {
this.showC = true;
}, 0);
}
Copy the codeThis example is a little verbose to write, but it has achieved the sequential rendering we want. The page is displayed after the components are initialized, and then the rest of the components are rendered in order, rendering the entire page as streaming.
Some people may be concerned that v-IF has a compile/unload process that has a performance impact. There is no need to worry here, however, because v-if is lazy and will only start initialization when the first value is true.
Component to keep alive
If you’re doing a large Web SPA, you have a lot of routers that correspond to a lot of pages. In addition to the caching mechanism, vue’s keep-Alive component can help to ensure the efficiency of page loading in quick page switching (such as the common TAB page). It keeps the components in the browser’s memory so you can switch them quickly.
Based optimization
v-if v-show
If there is no permission limit, select according to the user click frequency. V-show is used for frequent switching, and V-IF is used for infrequent switching. The optimization point here is to reduce the total number of DOM in the page, and I prefer v-IF. First screen rendering is accelerated by reducing the number of DOM. Don’t write too much inside the template expression and judging v – if = “isShow && isAdmin && (a | | b)”, although this kind of expression can be identified, but not a long-term solution, when looking at uncomfortable, appropriate to the methods and the computed encapsulated into a method, The advantage of this is that we can judge the same expression in multiple places, and call the same method when judging other elements with the same permission.
The loop provides the key whenever possible when using v-for, unless it is very simple to iterate over the output DOM content, or it is deliberately relying on the default behavior for performance gains. Reference to a Vue document: When vue.js is updating a list of rendered elements with v-for, it defaults to a “reuse in place” policy. If the order of the data items is changed, Vue will not move the DOM elements to match the order of the data items, but will simply reuse each element here and make sure that it shows each element that has been rendered under a specific index. This is similar to Vue 1.x track-by=”$index”.
This default mode is efficient, but only applies to list rendering output that does not depend on the child component state or temporary DOM state (for example, form input values).
To give Vue a hint that it can track the identity of each node and thus reuse and reorder existing elements, you need to provide a unique key attribute for each item. The ideal key value is the unique ID that each item has. For watch and computed, see the example on the official website. The calculation attribute is mainly a layer of filter conversion, and do not add some call methods to it. The function of the watch is to listen for changes in the data to change the data or to trigger events such as this.$store.dispatch(‘update’, {… }) Make use of promise’s concurrent requests whenever possible based on the requirements.
other
Such as packaging optimization: some static modules can be excluded when packaging, such as UE, vuex, Vue-router, AXIos, etc., instead of the domestic BOOTCDN directly into the root directory of the index.html. There is an externals in Webpack, so you can ignore libraries that don’t need to be packaged
externals: {
'vue': 'Vue'.'vue-router': 'VueRouter'.'vuex': 'Vuex'.'axios': 'axios'
}
Copy the codeOr using webPack’s dynamic link library DllPlugin, the package will output a class DLL package (DLL package from Windows dynamic link library), the code itself will not be executed, mainly provided for our business code reference. To package the static resource file (running the dependency) separately from the source file, use DllPlugin to package the static resource and DllReferencePlugin to make the source file reference the resource file. The DLL is packaged once, and the next business code change is not repackaged and introduced in HTML modules
<script src="./static/js/vendor.dll.js"></script>
<script src="/dist/build.js"></script>
Copy the codeFor more information on how to use WebPack, read The book webPack. Others include style optimization, reducing component coupling, and so on.