这是之前在公司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文件,实现自动分环境运行。

大型vue单页面项目优化总结的更多相关文章

  1. vue单页面项目架构方案

    这里的架构方案是基于vue-cli2生成的项目应用程序产生的,是对项目应用程序或者项目模板的一些方便开发和维护的封装.针对单页面的解决方案. 主要有四个方面: 一,不同环境下的分别打包 主要是测试环境 ...

  2. vue单页面项目返回上一页无效,链接变化了,但是页面没有变化

    在最近的项目中,返回上一页没有效果,经过好久的排查才发现问题,是路由守卫写法不规范导致. 在项目中用路由守卫做了登录拦截,没登录的跳转到登录页面.页面跳转和拦截都没问题,但是返回上一页就不行了,也没有 ...

  3. vue单页面项目中解决安卓4.4版本不兼容的问题

    1.cnpm安装 cnpm i babel-polyfill --save cnpm i es6-promise --save 2.main.js引入 import ‘babel-polyfill‘ ...

  4. 处理 Vue 单页面应用 SEO 的另一种思路

    vue-meta-info 官方地址: monkeyWangs/vue-meta-info (设置vue 单页面meta info信息,如果需要单页面SEO,可以和 prerender-spa-plu ...

  5. 关于处理移动端Vue单页面及其内嵌兼容问题

    关于处理移动端Vue单页面及其内嵌兼容问题 question:由于最近转移了以前的H5项目,重构使用Vue单页面,导致部分手机内嵌或在微信浏览器中无法浏览,或者无法使用ajax请求:手机机型千变万化, ...

  6. 处理 Vue 单页面 SEO 的另一种思路

    vue-meta-info 官方地址: https://github.com/monkeyWang... (设置vue 单页面meta info信息,如果需要单页面SEO,可以和 prerender- ...

  7. Vue单页面骨架屏实践

    github 地址: VV-UI/VV-UI 演示地址: vv-ui 文档地址:skeleton 关于骨架屏介绍 骨架屏的作用主要是在网络请求较慢时,提供基础占位,当数据加载完成,恢复数据展示.这样给 ...

  8. vue单页面打包文件大?首次加载慢?按需加载?是你打开方式不对

    部署各vue项目,走了一遍坑.... vue单页面应用刷新404 找到nginx多网站配置文件:类似nginx/sites-available/www.baidu.com server { liste ...

  9. [转] 2017-11-20 发布 另辟蹊径:vue单页面,多路由,前进刷新,后退不刷新

    目的:vue-cli构建的vue单页面应用,某些特定的页面,实现前进刷新,后退不刷新,类似app般的用户体验.注: 此处的刷新特指当进入此页面时,触发ajax请求,向服务器获取数据.不刷新特指当进入此 ...

随机推荐

  1. URAL1696 Salary for Robots

    题目戳这里. 最长下降子序列单调队列求法. \(f_{i,j,k}\)表示考虑前\(i\)个数,\(g_1 = j,g_2 = k\)的方案数.转移: \[f_{i,j,k} = \sum_{p = ...

  2. hadoop SecondNamenode 详解

    SecondNamenode名字看起来很象是对第二个Namenode,要么与Namenode一样同时对外提供服务,要么相当于Namenode的HA. 真正的了解了SecondNamenode以后,才发 ...

  3. Codeforces Round #350 (Div. 2) A

    A. Holidays time limit per test 1 second memory limit per test 256 megabytes input standard input ou ...

  4. HDU4725:The Shortest Path in Nya Graph(最短路)

    The Shortest Path in Nya Graph Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K ...

  5. ng依赖注入

    依赖注入 1.注入器在组件的构造函数中写服务constructor(private httpreq:HttpService) { } 2.提供器 providers: [HttpService],

  6. Astah画时序图

    Astah画时序图,666 1.生命线 时序图中表示为从对象图标向下延伸的一条虚线,表示对象存在的时间, 一般用来描述 系统 :如 客户端,代理层,缓存层,服务器层1.....服务器层N,数据库等. ...

  7. org.springframework.beans.factory.NoSuchBeanDefinitionException: No qualifying bean of type [com.oskyhang.gbd.service.UserService] found for dependency: expected at least 1 bean which qualifies as aut

    spring中一个符号的错误居然让我浪费了四五个小时才找出来,不得不给自己了两个耳光.. 由于新建项目与原来项目的目录结构有所不同,copy过来的配置文件,有些地方修改的不彻底,导致spring扫描注 ...

  8. 动态规划:状压DP

    状压DP可以用在NP问题的小规模求解中(不理解,感觉和可以搜索的题很类似) 如果状态是个网格,数据范围很小,基本锁定状压DP 例题是BZOJ1725 题意是这样的,给定一个黑白图,然后种田,要求田与田 ...

  9. 从一段字符串中去除数字的shell方法

  10. HDU 2036 改革春风吹满地 (数学)

    题目链接 Problem Description " 改革春风吹满地, 不会AC没关系; 实在不行回老家, 还有一亩三分地. 谢谢!(乐队奏乐)" 话说部分学生心态极好,每天就知道 ...