当前位置: 首页 > 后端技术 > Node.js

Vue项目性能优化方法

时间:2023-04-03 17:28:40 Node.js

大概有以下几点:路由组件按需加载。一般一个项目会有多个页面(路由)。利用webpack的代码切分和vue的异步组件,根据路由按需加载代码;可以大大提高首次打开的速度。页数越多,效果越明显,结合Vue的异步组件和webpack的代码拆分实现按需加载将每个页面需要加载的代码存储在CDN中,如vue.min.js、axios、vuex.js、vue-router.js等.SourceMap相关代码不要在js中输入sourceMap文件,会大大增加js文件的体积。不要将大图像输入base64。将base64键入大图像并增加js文件的大小。首屏加载内容,提高加载速度;vue有现成的插件,可以使用静态资源存放在cdn中,打包后可以使用脚本直接上传到cdn中。vue-ssrssr可以在服务器性能足够的情况下加速首屏渲染。而对于seo友好的vue文件的使用,在使用构建工具时,vue文件应该使用不带编译器的,比带编译器的小30%左右;npm默认加载不带编译器的,但是需要注意代码保存时cdn写相关的列表渲染添加keykey可以在vue做diff处理的时候快速找到可重用的dom功能组件使用功能组件可以提高组件渲染效率,但是没有状态,生命周期v-if和v-show使用v-如果第一次不需要显示,可以减少vue对响应模块的处理,但是切换时比v-show慢;使用v-showObject.freeze冻结频繁切换时不需要改变的内容组件细分Vue在组件级别比较新旧vnode。当视图发生轻微变化时,细分组件可以提高性能。