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'