这是之前在公司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. HTML5<canvas>标签:使用canvas元素在网页上绘制线条和圆(1)

    什么是 Canvas? HTML5 的 canvas 元素使用 JavaScript 在网页上绘制图像. 画布是一个矩形区域,您可以控制其每一像素. canvas 拥有多种绘制路径.矩形.圆形.字符以 ...

  2. Linux总结(二)

      1. 虚拟机安装 a)双系统(不建议初学者一开始去装) b)般建议使用虚拟机来操作试验环境 c)好处:可以模拟真实的环境进行各种的试验和操作 d)在启动之后,在操作的时候会占用一部分的系统资源 1 ...

  3. 使用def文件简化dll导出

    原文链接地址:http://www.cnblogs.com/TianFang/archive/2013/05/04/3059073.html 在C++中,我们可以通过 __declspec(dllex ...

  4. [Leetcode] Reverse linked list ii 反转链表

    Reverse a linked list from position m to n. Do it in-place and in one-pass. For example:Given1->2 ...

  5. HttpClient测试类请求端和服务端即可能出现乱码的解决

    junit HttpClient 请求端 代码: package com.taotao.httpclient; import java.util.ArrayList; import java.util ...

  6. c#中数据库字符串的连接几种方式

    ADO.net 中数据库连接方式(微软提供) 微软提供了以下四种数据库连接方式:System.Data.OleDb.OleDbConnectionSystem.Data.SqlClient.SqlCo ...

  7. CSS中的text-shadow。

    text-shadow(文字投影),box-shadow(容器投影),border-radius(圆角)这三个属性估计以后用的比较多,记录 一下.目前不支持IE系列(不过可以使用其他方法实现,下文有详 ...

  8. (转)什么是JSON+如何处理JSON字符串

    仍然是crifan的好文: http://www.crifan.com/summary_what_is_json_and_how_to_process_json_string/ . . . .

  9. linux编译动态库 fPIC作用

    在生成动态库时,常常习惯性的加上fPIC选项,fPIC有什么作用和意义,加不加有什么区别,这里做下小结: fPIC的全称是 Position Independent Code, 用于生成位置无关代码. ...

  10. Python基础(6)_函数

    一 为何要有函数? 不加区分地将所有功能的代码垒到一起,问题是: 代码可读性差 代码冗余 代码可扩展差 如何解决? 函数即工具,事先准备工具的过程是定义函数,拿来就用指的就是函数调用 结论:函数使用必 ...