vue项目优化

vue项目性能优化

 

1.动态加载组件

 

　　介绍：在component文件下有很多的组件，在其他的组件引入，势必会有很多的import的引入，麻烦。

　　　　   所以动态引入在main.js，之后在其他的vue文件中直接使用，无需导入

 

 

//cptsRegister.js文件

import Vue from 'vue'

function capitalizeFirstLetter (str) {
    return str.charAt(0).toUpperCase() + str.slice(1)
}

// 用来匹配.vue的前缀函数
function validateFileName(str) {
    return /^\S+\.vue$/.test(str) && str.replace(/^\S+\/(\w+)\.vue$/, (res, $1) => capitalizeFirstLetter($1))
}


const requireComponent = require.context('./', true, /\.vue$/)

// 遍历匹配到的文件夹及文件名，并且遍历得到每一个
requireComponent.keys().forEach(filePath => {
    
    // 得到每一个.vue文件中的属性方法和组件的name值
    const componentConfig = requireComponent(filePath)
    // 得到文件名的前半部分index
    const fileName = validateFileName(filePath)
    // 判断如果是以index开头命名的就返回组件的name值来注册组件，否则就使用文件名来注册
    
    const componentName = fileName.toLowerCase() === 'index' ? capitalizeFirstLetter(componentConfig.default.name) : fileName
    Vue.component(componentName, componentConfig.default || componentConfig)
})



// main.js
//在main.js引入
import './components/cptsRegister.js'

 

1.1.目录结构

 

2.全局过滤器的优化

 

　　介绍：在开发过程中我们可能会遇到很多的全局过滤器，一个一个的注册会很麻烦，所以一次性注册所有的全局过滤器

 

// filterRegister.js

const filters = {
    compNumber: function (title) {
        return title + '张雪冬'
    }
}

export default filters



// main.js

// 全局注册所有的过滤期

import filterRegister from './utils/filterRegister.js'

for (let key in filterRegister) {
  Vue.filter(key, filterRegister[key])
}