浅谈Vue 项目性能优化 经验

我优化公司的项目总结的几点:

1、先查看引入的图片大小,如果太大了,可以压缩,压缩路径:https://zhitu.isux.us/

2、代码包优化,

待下项目开发完成。进行打包源码上线环节,需要对项目开发环节的开发提示信息以及错误信息进行屏蔽,一方面可以减少上线代码包的大小;另一方面提高系统的安全性。在vuejs项目的config目录下有三个文件dev.env.js(开发环境配置文件)、prod.env.js(上线配置文件)、index.js(通用配置文件)。vue-cli脚手架在上线配置文件会自动设置允许sourceMap打包,所以在上线前可以屏蔽sourceMap。如下所示,index.js的配置如下,通用配置文件分别对开发环境和上线环境做了打包配置分类,在build对象中的配置信息中,productionSourceMap修改成false:

3、路由懒加载:

官方上提示有两种,

一种是:这种因为没有声明打包的文件名称,所有的路由就会打包到同一个js文件中

const Foo = () => import(‘./Foo.vue‘)

另一种是:是把组件按块封装,/* webpackChunkName: "group-foo" */,就是声明的组件块,如果有多个的名称,就会 打包多个js文件

const Foo = () => import(/* webpackChunkName: "group-foo" */ ‘./Foo.vue‘)

我自己实现:

const ColMoney = () => import(/* webpackChunkName: "Proscenium" */ ‘@/components/pages/Proscenium/ColMoney/MoneyList‘)

const Prepay = () => import(/* webpackChunkName: "LearnTube" */ ‘@/components/pages/LearnTube/Student/Prepay‘)

只写了两个例子,这样就会生成两个js文件,等去点击那个路由时,才会加载相应的js文件。

以上是我亲自试过的,

我在网上看过很多的博文,说:

1、引入cdn加速,也就是vender bundle ,我目前还没有试过,https://segmentfault.com/a/1190000009443366?utm_source=tag-newest 大家可以去这个上面看看,我觉得可行。

2、对项目代码中的JS/CSS/SVG(*.ico)文件进行gzip压缩,我试过,但是没成功,npm install --save-dev compression-webpack-plugin一直报错,我就放弃了,大家如果想看,可以去 https://www.jianshu.com/p/41075f1f5297 这个链接看看。

原文地址:https://www.cnblogs.com/mxyr/p/10256715.html

时间: 2024-11-06 21:11:17

浅谈Vue 项目性能优化 经验的相关文章

浅谈Vue项目优化

前几天看到大家说 vue 项目越大越难优化,带来很多痛苦,这是避免不了的,问题终究要解决,框架的性能是没有问题的,各大测试网站都有相关数据.下面进入正题 转自https://blog.csdn.net/qq_33834489/article/details/79144762 基础优化 所谓的基础优化是任何 web 项目都要做的,并且是问题的根源.HTML,CSS,JS 是第一步要优化的点 分别对应到 .vue 文件内的,<template>,<style>,<script&g

BizTalk开发系列(三十二)浅谈BizTalk主机性能优化

很多BizTalk的项目都要考虑到性能优化的问题,虽然BizTalk采用多线程处理消息的,大大提高了程序效率.但默认情况下 BizTalk的主机有很多阻止参数会控制BizTalk对服务器的资源使用率,从而约束了BizTalk的效率.之前做了一个200万条CSV数据通过 BizTalk传到数据库的程序.在不改变程序的情况下对主机性能做了一下简单优化,处理效率发生了成倍的增长. 程序逻辑 先简单的介绍一下程序的处理逻辑,CSV原文件大概有200多万条数据,文件大小50多M.每条只有两个字段总长度大概

近期业务需要所引发的性能优化问题,浅谈线程池性能优化

线程池对于性能优化无处不在 1.楼主在平时产品开发过程中所遇到的性能问题,特别是最近特别流行的微服务架构. web - java - 底层数据源(python亦或者opensatck),对于这种前后台分离的场景 无时无刻会存在对于业务场景需要对同一数据源进行百次,千次的重复调用过程. 性能方面就会出现接口延迟,过慢,超时等情况 下面就楼主最近遇到的一个业务场景加以举例说明:做云计算相关的想必都是知道,我们在为客户提供单板的过程中(也就是物理机):会对众多的单板进行管理,这里我们就引进主机组: 主

浅谈ORACLE SQL语句优化经验

(1) 选择最有效率的表名顺序(只在基于规则的seo/' target='_blank'>优化器中有效): ORACLE 的解析器按照从右到左的顺序处理FROM子句中的表名,FROM子句中写在最后的表(基础表 driving table)将被最先处理,在FROM子句中包含多个表的情况下,你必须选择记录条数最少的表作为基础表.如果有3个以上的表连接查询, 那就需要选择交叉表(intersection table)作为基础表, 交叉表是指那个被其他表所引用的表. (2) WHERE子句中的连接顺序.

转:浅谈CSS在前端优化中一些值得注意的关键点

前端优化工作中要考虑的元素多种多样,而合理地使用CSS脚本可以在很大程度上优化页面的加载性能,以下我们就来浅谈CSS在前端优化中一些值得注意的关键点: 当谈到Web的“高性能”时,很多人想到的是页面加载时间,但其实性能不仅仅是指加载时间,还包括浏览器性能.网络性能.开发效率.在Web前端开发中,性能是一个非常重要的需要考虑的点.本文将介绍一些开发原则和性能准则,这些都是提高Web前端性能的基础. 1. 开发原则 1.1 编写符合当代浏览器性能的代码如果想提高前端性能,就必须理解浏览器的工作原理,

20多条MySQL 性能优化经验分享

当我们去设计数据库表结构,对操作数据库时(尤其是查表时的SQL语句),我们都需要注意数据操作的性能.这里,我们不会讲过多的SQL语句的优化,而只是针对MySQL这一Web应用最多的数据库.希望下面的这些优化技巧对你有用. 1. 为查询缓存优化你的查询 大多数的MySQL服务器都开启了查询缓存.这是提高性最有效的方法之一,而且这是被MySQL的数据库引擎处理的.当有很多相同的查询被执行了多次的时候,这些查询结果会被放到一个缓存中,这样,后续的相同的查询就不用操作表而直接访问缓存结果了. 这里最主要

浅谈软件项目的需求管理

软件项目区别于其它项目的最显著的特征是其不可见性,它不像硬件购销.建筑工程,都是实实在在可见的东西.而软件项目在系统交付之前很长一段时间,客户是无法感知自己想要的系统究竟是什么样子.因此,需求管理就显得十分重要,据相关统计数据分析,软件项目90%以上失败的原因都在于没有重视需求或者需求管理方面做的不到位导致的. 需求管理作为软件项目管理的一个重要内容,贯穿项目实施的全生命周期.俗话说:万事开头难.需求作为软件开发的第一个环节,其重要性不言而喻.市面上关于需求管理的相关理论和书籍很多,但多数停留在

【浅谈DOM事件的优化】

浅谈DOM事件的优化 在 JavaScript程序的开发中,经常会用到一些频繁触发的 DOM 事件,如 mousemove.resize,还有不是那么常用的鼠标滚轮事件:mousewheel (在 Firefox 中,滚轮事件为 DOMMouseScroll). 浏览器为了确保这些事件能够及时响应,触发的频率会比较高,具体的触发频率各浏览器虽然有出入,但出入不大.很多时候在需要注重性能的场景下使用这些事件会想各种办法对事件的触发频率进行优化,下面说说我的一些优化方法. mousemove 在拖拽

浅谈tomcat中间件的优化【转】

今天来总结一下tomcat的一些优化的方案,由于本人才疏学浅,写的不好,勿喷! tomcat对于大多数从事开发工作的童鞋应该不会很陌生,通常做为默认的开发环境来为大家服务,不过tomcat默认的一些配置对于生产环境来说是相当不够滴,特别对于内存以及线程的配置方面都很有可能成为日后性能的瓶颈. 接下来咱们就聊聊tomcat的优化,从内存以及线程两个方面来谈: 1.内存方面 tomcat的内存优化操作起来就比较简单了 如果是linux环境的话设置如下: 修改TOMCAT_HOME/bin/catal