How to avoid the thorny road of Vue performance optimization?

How to avoid the thorny road of Vue performance optimization?

With the rapid development of front-end technology in recent years, the Vue framework is very popular in China, and everyone can use it. How can Vue be written more elegantly than others? How to write better than others?

In view of the continuous research and large-scale investment of leading Internet companies in the field of cutting-edge technology, learning directly from them is the most convenient and efficient way to learn. But for programmers working in small and medium-sized companies, who are usually busy with business code, they rarely have the opportunity to come into contact with the best practices of large companies.

This article will introduce some best practices for Vue projects from major manufacturers:


Component registration once and for all

Usually, before the component is used, it needs to be imported and then registered, but if there are more high-frequency components, doing this every time, not only adds a lot of code, but the efficiency is low! How should we optimize it?

In fact, we can create our own (module) context with the help of webpack's require.context() method to realize automatic and dynamic require components.

We first add a file called global.js in the components folder (there are some high-frequency components), use require.context in this file to dynamically package all the required high-frequency components in, and then in the main.js file Introduce the global.js file.

//global.js file
import Vue from'vue'
function changeStr (str) {
  return str.charAt(0).toUpperCase() + str.slice(1)
const requireComponent = require.context('./', false,/\.vue$/)
//Find components ending with vue in the same level directory
const install = () => {
  requireComponent.keys().forEach(fileName => {
    let config = requireComponent(fileName)
    console.log(config)//./child1.vue Then use regular to get child1
    let componentName = changeStr(
    Vue.component(componentName, config.default || config)
export default {
  install//expose the install method to the outside

Finally, we can use these high-frequency components on the page anytime, anywhere, without manually introducing them one by one.


High-precision permission control-custom instruction directive

We usually add v-if/v-show to an element for permission management, but if the judgment conditions are cumbersome and multiple places need to be judged, the code in this way is not only inelegant but also redundant.

In view of this situation, we can handle it through global custom instructions: we first create a new array.js file to store global functions related to permissions;

export function checkArray (key) {
  let arr = ['1', '2', '3', '4','demo']
  let index = arr.indexOf(key)
  if (index> -1) {
    return true//have permission
  } else {
    return false//No permission

Then mount the array file to the global:

import {checkArray} from "./common/array";
Vue.directive("permission", {
  inserted (el, binding) {
    let permission = binding.value;//Get the value of v-permission
    if (permission) {
      let hasPermission = checkArray(permission);
      if (!hasPermission) {//No permission to remove Dom elements
        el.parentNode && el.parentNode.removeChild(el);

Finally, we can judge by the custom command v-permission on the page:

<div class="btns">
    <button v-permission="'1'">Permission button 1</button>//will be displayed
    <button v-permission="'10'">Permission button 2</button>//No display
    <button v-permission="'demo'">Permission button 3</button>//will be displayed

The above is the actual combat experience I share with several Vue manufacturers.

Have you ever thought about a problem? As the front-end interview requirements are getting higher and higher, frameworks like Vue are already a basic skill. Why do we dare to say that they are better than others?

  • We all write components, but do you know how to make components become highly reusable component library components?
  • We will all package and launch the project, but do you know how to write configuration files to optimize the packaging speed?
  • We all write routing, but do you know how to write to ensure the decoupling of multiple routing modules and make it easier to add new routing modules?

Full front-end learning requires a complete front-end thinking practice teaching, here is a complete diagram of the front-end path for everyone to learn:

Reference: How to avoid the thorns of Vue performance optimization? -Cloud + Community-Tencent Cloud