1.代码包优化屏蔽sourceMap待下一步项目开发完成。在打包源码并启动的环节，需要屏蔽项目开发环节的开发提示信息和错误信息。一方面可以减少在线代码包的体积；另一方面，它可以提高系统的安全性。在vuejs项目的config目录下，有dev.env.js（开发环境配置文件）、prod.env.js（线上配置文件）、index.js（通用配置文件）三个文件。vue-cli脚手架会自动设置sourceMap打包到线上配置文件中，所以可以在上线前屏蔽sourceMap。如下图，index.js的配置如下。通用配置文件对开发环境和线上环境的打包配置进行了分类。在构建对象中的配置信息中，将productionSourceMap改为false:'usestrict'//模板版本：1.3.1//文档见http://vuejs-templates.github.io/webpack.constpath=require('path')module.exports={dev:{//PathsassetsSubDirectory:'static',assetsPublicPath:'/',proxyTable:{},//各种DevServer设置host:'localhost',//可以overwrittenbyprocess.env.HOSTport:8080,//可以被process.env.PORT覆盖，如果端口被占用，会判断空闲的autoOpenBrowser:false,errorOverlay:true,notifyOnErrors:true,poll:false,//https://webpack.js.org/configuration/dev-server/#devserver-watchoptions-/***SourceMaps*///https://webpack.js.org/configuration/devtool/#developmentdevtool:'cheap-module-eval-source-map',//如果您在devtools中调试vue文件时遇到问题，//将其设置为false-它*可能*有帮助//https://vue-loader.vuejs.org/en/options.html#cachebustingcacheBusting:true,cssSourceMap:true},build:{//index.html模板index:path.resolve(__dirname,'../dist/ndindex.html'),//路径assetsRoot:path.resolve(__dirname,'../dist'),assetsSubDirectory:'static',assetsPublicPath:'./',/***SourceMaps*/productionSourceMap:false,//https://webpack.js.org/configuration/devtool/#productiondevtool:'#source-map',//Gzip默认关闭，因为许多流行的静态主机，例如//Surge或Netlify已经gzipall静态资产给你。//在设置为`true`之前，确保：//npminstall--save-devcompression-webpack-pluginproductionGzip:true,productionGzipExtensions:['js','css','svg'],//运行带有额外参数的构建命令//在构建完成后查看包分析器报告：//`npmrunbuild--report`//设置为`true`或`false`始终开启或关闭bundleAnalyzerReport:process.env.npm_config_report}}对项目代码中的JS/CSS/SVG(*.ico)文件进行gzip压缩在vue-cli脚手架的配置信息中，有acode压缩配置项，比如index.js的通用配置，productionGzip设置为true，但是首先需要支持compress-webpack-plugin，所以需要通过npminstall--save-devcompression-webpack-插件（如果npminstall有错误，直接用cnpminstall安装（可能网络不好，npminstall会出现比较频繁），gzip会压缩js和css文件；对于图片压缩，没有压缩效果png,jpg,jpeg,forsvg,ico文件和bmp文件的压缩效果达到50%，生产中GzipExtensions:['js','css','svg'],设置需要压缩的文件格式后压缩工程文件，需要浏览器客户端支持gzip，后台支持压缩包。下面可以查看成功支持gzip状态：'usestrict'//模板版本：1.3.1//文档参见http://vuejs-templates.github.io/webpack.constpath=require('path')module。exports={build:{//index.html模板index:path.resolve(__dirname,'../dist/ndindex.html'),//路径assetsRoot:path.resolve(__dirname,'../dist'),assetsSubDirectory:'static',assetsPublicPath:'./',/***SourceMaps*/productionSourceMap:false,//https://webpack.js.org/configuration/devtool/#productiondevtool:'#source-map',//默认关闭Gzip，因为许多流行的静态主机（例如Surge或Netlify）已经为您gzip所有静态资产。//在设置为`true`之前，确保：//npminstall--save-devcompression-webpack-pluginproductionGzip:true,productionGzipExtensions:['js','css','svg'],//运行带有额外参数的构建命令//在构建完成后查看包分析器报告：//`npmrunbuild--report`//设置为`true`或`false`以始终打开或关闭它加载在路由配置文件中。这是router.js中的参考组件。如果采用同步方式加载组件，首屏加载时会加载较多的网络资源，资源比较多，加载速度比较慢。所以设置路由的懒加载和按需加载会加快首屏的渲染速度。当路由没有懒加载时，可以在Chrome的devtool中查看首屏网络资源的加载情况（6requests3.8MBtransferredFinish:4.67sDOMContentLoaded2.61sLoad2.70s）。延迟加载路由后（7requests800kb转Finish2.67sDOMContentLoaded1.72sLoad800ms），可以看到加载速度明显加快。但是懒加载后，实现了按需加载，那么项目打包就不会把所有的js都打包到app.[hash].js中，好处是可以减少app.[hash].js的体积，缺点是会把其他js单独打包，导致多个js文件，会有多个https请求。如果项目比较大，需要注意懒加载的效果。//实际懒加载方式importVuefrom"vue";从“vue-router”导入路由器；Vue.use（路由器）；exportdefaultnewRouter({mode:"history",base:"/facex/district/",routes:[{path:"/",redirect:"index"},{path:"/",名称:"home",component:resolve=>require(["@/views/home"],resolve),children:[{//员工查询path:"/employees",component:resolve=>require(["@/components/employees"],resolve)},{//首页path:"/index",component:resolve=>require(["@/views/index"],resolve)},{//访问查询path:"/visitorlist",component:resolve=>require(["@/components/visitorlist"],resolve)},{path:"/department",component:resolve=>require(["@/views/department"],resolve)},//识别查询{path:"/discriminate",component:resolve=>require(["@/components/discriminate"],resolve)},{path:"/addDevice",component:requiresolve=>require(["@/views/addDevice"],resolve)},{路径:"/districtNotice",组件:resolve=>require(["@/components/districtNotice"],resolve)}]},{path:"/noticeList",name:"noticeList",component:resolve=>require(["@/views/noticeList"],resolve)},{path:"/login",name:"login",组件:resolve=>require(["@/views/login"],resolve)},{路径:"/register",名称:"register",组件:resolve=>require(["@/views/register"],resolve)},{path:"/setaccount",name:"setaccount",component:resolve=>require(["@/views/setaccount"],resolve)},{path:"/addGroup",名称:"addGroup",component:resolve=>require(["@/views/addGroup"],resolve)},{路径:"/guide",name:"guide",component:resolve=>require(["@/组件/指南"],resolve)},{路径:"/addNotice",名称:"addNotice",组件:resolve=>require(["@/views/addNotice"],resolve)}]});i2.源码优化v-if和v-show选择调用v-show和v-if的区别：v-if是懒加载，状态为true时会加载，为false时不会占用布局空间；v-show不管state是true还是false都会渲染，占用布局空间。对于需要经常调用且不需要权限显示和隐藏的项目，可以选择使用v-show。可以减少系统的切换开销，为item设置一个唯一的key值。在遍历和渲染列表数据的时候，需要为每个item设置一个唯一的key值，这样vuejs的内部机制才能准确的找到列表数据。状态更新时，将新状态值与旧状态值进行比较，快速定位差异。细分vuejs组件在项目开发过程中，第一个版本将所有组件的布局写在一个组件中。当数据发生变化时，由于组件代码较多，导致vuejs数据驱动视图更新缓慢，导致渲染缓慢。导致体验比较差。所以细分组件，比如一个组件，可以将整个组件细分为轮播组件、列表组件、分页组件等。减少watch数据当一个组件数据发生变化，需要改变对应的状态时，需要改变状态另一个组件。可以使用watch监听相应的数据变化，绑定事件。当watch数据比较少的时候，性能消耗并不明显。当数据变大时，系统会卡顿，所以减少watch数据。其他不同组件状态的双向绑定可以使用事件中心总线或者vuex进行数据变更操作。内容系统中的图像资源是按需加载的。对于内容系统，图像是按需加载的。如果图片加载过多，可以先使用懒加载库比如v-lazy或者绑定鼠标的scroll事件滚动到可见区域先加载显示数据，减少系统加载的数据.SSR（server-siderendering）如果项目比较大，不管首屏怎么优化，都会出现闪屏或者黑屏一会。可以考虑使用SSR（服务端渲染）。vuejs官方文档为next.js提供了很好的服务端解决方案，但局限性在于它只支持Koa、express等Nodejs后台框架，需要webpack支持。目前，我所了解的是后端支持。vuejs的后端渲染支持php，其他不清楚。3.用户体验优化better-click防止iphone点击延迟在开发手机vuejs项目时，手指触摸会有300ms的延迟效果，可以使用better-click优化ipone系列的兼容体验。Chrysanthemumloading菊花加载，在加载资源的过程中，可以提供加载。这种菊花加载不是那么菊花。所以你可以自由选择你喜欢的菊花。骨架屏加载会在首屏加载更多资源，可能会出现白屏和闪屏。坏的经验。在资源数据未加载时使用骨架屏显示首屏，体验效果好。
