大型vue单页面项目优化总结

这是之前在公司oa项目优化时罗列的优化点,基本都已经完成,当时花了点心思整理的,保存在这里,方便以后其他项目用到查漏补缺。

1、打包文件中的app.js文件放入cdn,加快页面首次加载速度  2、提取公共方法,减少js代码量  3、提取公共组件,将统计分析的售前和售后,客户分配,客户管理,客服管理等页面的搜索条件模块化,减少了html代码量,减少了每个页面中都有的重复方法。 4、vue-router路由全部改成懒加载路由,该页面被点开时才加载该页面.vue组件,提高首页加载速度。  5、根据页面复杂度,删除部分页面生命周期created中的window.setTimeout方法  6、将所以v-show替换成v-if,v-if如果不为真就不会加载这段代码,而v-show还是会加载这些代码,这样加快了页面加载速度。 7、检查所有页面,删除页面中没有用到的css和data数据以及js方法,减少文件体积。 8、使用webpack插件,将常用不需要重复打包的依赖打包出来,在index.html直接引用,减小最后上线打包出来vendor文件体积,加快首屏加载速度和打包速度。(实验成功,但是没有在打包版本实施) 9、对复杂页面的弹窗使用lazyRender懒渲染组件,优化该页面的打开速度。 10、webpack build打包时去除debugger和console语句,具体修改在webpack.prod.conf.js UglifyJsPlugin插件的compress里。 11、对每个页面vuex进行优化,提到全局方法,减少大量重复代码  12、对页面自适应样式进行优化, 用全局css代替原来的js;减少了每个页面css代码 13、对表格进行优化,提取出列名等写出数组,减少表格html体积 0.2 14、引入顶部进度条插件,提高页面加载体验 15、研究首页优化方法,加快单页面首页加载体验 

16、引用路径优化 webpack.base.conf.js resolve.alias 17、webpack 解析模块时应该搜索的目录优化 webpack.base.conf.js resolve.modules 18、使用webpack进行代码分离,每个页面打包成一个单独js,减少文件体积,加快加载速度  19、把常用的依赖使用外部cdn引入,不再打包,分担服务器压力,加快页面加载速度。 20、使用webpack代码分析工具,方便针对性优化依赖和代码块。 21、同一个组件比如多个编辑页面切换时,本来的方案是使用watch.$route进行处理,经参考也可以在路由上加唯一key,保证切换路由重新渲染。参考http://www.jianshu.com/p/c315c9211146中的router-view 22、合理使用vuex,频繁切换的页面组件比如多个编辑页面,保存多个数据store,减少http请求。 23、加快webpack性能,参考地址https://jeffjade.com/2017/08/12/125-webpack-package-optimization-for-speed/中设置 test & include & exclude 24、生产环境采用webpack-parallel-uglify-plugin替换UglifyJsPlugin,提高webpack性能,参考地址https://jeffjade.com/2017/08/12/125-webpack-package-optimization-for-speed/中的增强代码代码压缩工具 25、src/api/config.js和package.json文件,实现自动分环境运行。 

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏云计算教程系列

Ubuntu上如何使用GitLab CI搭建持续集成Pipeline

GitLab Community Edition是一个自托管的Git存储库提供程序,具有帮助项目管理和软件开发的附加功能。GitLab提供的最有价值的功能之一是...

39230
来自专栏魏艾斯博客www.vpsss.net

PhpStudy 安装 Ftp Server 的方法

23120
来自专栏LanceToBigData

linux(十四)之linux NFS服务管理

学到这里差不多就结束了linux的基础学习了,其实linux的内容并不难,我们要经常的反复的去操作它,多多和它去联络感情才能很好的掌握这个linux。 加油!今...

460100
来自专栏cnblogs

vue、rollup、sass、requirejs组成的vueManager

近段时间本人一直在思考如何基于vue搭建一个中后端管理系统的通用基础前端解决方案。思考的主要问题点如下: 如何使各个子业务模块的按需加载 css预处理方案的选择...

27660
来自专栏Python爬虫与数据挖掘

安装完Python之后,如何设置Python环境变量

人生苦短,我用Python。最近有许多加群的萌新在咨询Python安装的事宜,Python安装问题不大,可以戳这篇文章:。本以为安装Python之后就可...

18620
来自专栏IT 指南者专栏

Maven 项目管理工具基础入门系列(二)

? 一、前言 Maven 项目管理工具基础系列(一) 这篇文章中,我们已经初步了解了 Maven,也知道了使用 Maven 作为项目管理工具的好处,特别是已经...

38190
来自专栏开源优测

AutoLine源码分析之调度管理器

AutoLine采用了Apscheduler库来实现AutoLine的测试用例的执行任务的调度管理

11710
来自专栏编程

在linux下安装w3af和使用

技术交流,请勿用于违法途径,后果自负 一、环境: sudoapt-get install git Python 2.7,大部分的linux都默认安装 sudoa...

39090
来自专栏hrscy

记录网站诞生过程-使用hexo+github pages

此博客记录了搭建网站的详细过程,以及建站过程中遇到的一些坑。博客介绍了安装homebrew,nodejs,hexo,域名注册,github设置,DNS解析等过程...

11530
来自专栏Linyb极客之路

Nginx代理功能与负载均衡详解

Nginx的代理功能与负载均衡功能是最常被用到的,关于nginx的基本语法常识与配置已在上篇文章中有说明,这篇就开门见山,先描述一些关于代理功能的配置,再说明负...

14320

扫码关注云+社区

领取腾讯云代金券