vue项目性能优化
1.动态加载组件
介绍:在component文件下有很多的组件,在其他的组件引入,势必会有很多的import的引入,麻烦。
所以动态引入在main.js,之后在其他的vue文件中直接使用,无需导入
1 //cptsRegister.js文件 2 3 import Vue from 'vue' 4 5 function capitalizeFirstLetter (str) { 6 return str.charAt(0).toUpperCase() + str.slice(1) 7 } 8 9 // 用来匹配.vue的前缀函数 10 function validateFileName(str) { 11 return /^\S+\.vue$/.test(str) && str.replace(/^\S+\/(\w+)\.vue$/, (res, $1) => capitalizeFirstLetter($1)) 12 } 13 14 15 const requireComponent = require.context('./', true, /\.vue$/) 16 17 // 遍历匹配到的文件夹及文件名,并且遍历得到每一个 18 requireComponent.keys().forEach(filePath => { 19 20 // 得到每一个.vue文件中的属性方法和组件的name值 21 const componentConfig = requireComponent(filePath) 22 // 得到文件名的前半部分index 23 const fileName = validateFileName(filePath) 24 // 判断如果是以index开头命名的就返回组件的name值来注册组件,否则就使用文件名来注册 25 26 const componentName = fileName.toLowerCase() === 'index' ? capitalizeFirstLetter(componentConfig.default.name) : fileName 27 Vue.component(componentName, componentConfig.default || componentConfig) 28 }) 29 30 31 32 // main.js 33 //在main.js引入 34 import './components/cptsRegister.js'
1.1.目录结构
2.全局过滤器的优化
介绍:在开发过程中我们可能会遇到很多的全局过滤器,一个一个的注册会很麻烦,所以一次性注册所有的全局过滤器
1 // filterRegister.js 2 3 const filters = { 4 compNumber: function (title) { 5 return title + '张雪冬' 6 } 7 } 8 9 export default filters 10 11 12 13 // main.js 14 15 // 全局注册所有的过滤期 16 17 import filterRegister from './utils/filterRegister.js' 18 19 for (let key in filterRegister) { 20 Vue.filter(key, filterRegister[key]) 21 }