前言 公司目前现有的一款产品是使用vue v2.0框架实现的,配套的打包工具为webpack v3.0.整个项目大概有80多个vue文件,也算不上什么大型项目. 只不过每次头疼的就是打包所耗费的时间平均在一分钟左右,而且打包后有几个文件显示为[big],也就是文件体积过大. 最近就想着捣鼓一下,看能不能在此前的基础上做一些优化,顺带记录下来分享给大家. webpack打包优化 关于webpack的打包优化一般会从两个方面考虑:缩短打包时长和降低打包后的文件体积,这两个方面也刚好是前面我需要解决的…

项目背景: 在这次影像系统中,我们利用大数据平台做的是文件(图片.视频等)批次的增删改查,每个批次都包含多个文件,上传完成以后要添加文件索引(文件信息及批次信息),由于在Hbase存储的过程中,每个文件都对应一个文件rowKey,一个批次就会有很多个RoweKey,查询的下载的时候就必须根据每个文件的rowkey找到对应的文件,如果一个批次有很多个文件的话,就需要查找很多次,这样是很浪费时间的,一开始没注意这么多,开发并且完成功能测试后,觉得一切OK,但是作为大数据后台,对效率的要求非常高,在压…

转载:https://my.oschina.net/u/3627055/blog/2995973 背景 生产环境有二台阿里云服务器,均为同一时期购买的,CPU.内存.硬盘等配置相同.具体配置如下: 节点 CPU 内存 硬盘 其它 A 2CPU 4G 普通云盘 Centos6.4 64位+JDK1.8.0_121 B 2CPU 4G 普通云盘 Centos6.4 64位+JDK1.8.0_121 由于这二服务器硬件和软件配置相同,并且运行相同的程序,所以在Nginx轮询策略均weight=1,即平…

一次非常有趣的 SQL 优化经历   阅读本文大概需要 6 分钟. 前言 在网上刷到一篇数据库优化的文章,自己也来研究一波. 场景 数据库版本:5.7.25 ,运行在虚拟机中. 课程表 #课程表 create table Course( c_id int PRIMARY KEY, name varchar(10) ) 增加 100 条数据 #增加课程表100条数据 DROP PROCEDURE IF EXISTS insert_Course; DELIMITER $ CREATE PROCEDU…

1.抽离jquery,vue(多个第三方类库抽离) 修改入口文件(webpack.config.js中) entry: { entry: './src/entry.js', jquery:'jquery', vue:'vue' }, 2.引入插件: new webpack.optimize.CommonsChunkPlugin({ name:['jquery','vue'],//对应入口文件的jquery(单独抽离) filename:'assets/js/[name].js',//抽离到哪里…

sql优化经历 补充:看到这么多朋友对sql优化感兴趣,我又重新补充了下文章的内容,将更多关于sql优化的知识分享出来, 喜欢这篇文章的朋友给个赞吧,哈哈,欢迎交流,共同进步. 2015-4-30补充:非常感觉编辑的推荐,同时又对慢查询语句优化了一遍,并附上优化记录,欢迎阅读文章. 场景 我用的数据库是mysql5.6,下面简单的介绍下场景 课程表 10) ) 数据100条 学生表: 10) ) 数据70000条 学生成绩表SC select s.* from Student s where s…

webpack优化方案 1. 优化开发体验 1-1. 加快构建速度 ① 缩小文件搜索范围 由于 Loader 对文件的转换操作很耗时,需要让尽可能少的文件被 Loader 处理,用include和exclude去缩小: resolve.modules用于配置 Webpack 去哪些目录下寻找第三方模块:[path.resolve(__dirname, 'node_modules')](根目录下): resolve.mainFields用于配置第三方模块使用哪个入口文件:['mian']: res…

webpack 优化笔记 webpack4 自带的优化包括 swingTree(摇摆树)和作用域提升 swingTree 比如入口文件 index.js引入通用方法 util, 里面有 10个方法, 通过 import只用到了两个. 那么剩余的 8个, 会剔除掉没有用到的 死代码 util.js function a() {} function b() {} function c() {} function d() {} export default { a, b, c, d } index.j…

由于前端的快速发展,相关工具的发展速度也是相当迅猛,各大框架例如vue,react都有自己优秀的脚手架工具来帮助我们快速启动一个新项目,也正式因为这个原因,我们对于脚手架中最关键的一环webpack相关的优化知之甚少,脚手架基本上已经为我们做好了相关的开发准备,但是当我们想要做一些定制化的优化操作时,对webpack的优化也需要有一定的了解,否则无从下手,接下来就让我们进入webpack的优化世界 构建速度提升 loader提升 loader是webpack中最重要的特性,由于webpack自身…

某日运维突然说无线终端的频道页接口訪问量非常大,memcache缓存扛只是来.导致mysql并发查询量太大,导致server不停地宕机,仅仅能不停地重新启动机器.遗憾的是运维并没有告诉mysql查询量详细有多大[无量化,比方一秒多少个查询-]. 针对这个问题.有同事建议改了mysql+memcache的架构.採用redis存储更佳.可是问题的真正原因是什么呢?mysql一秒钟扛几百个并发查询应该是能够的吧?带着疑问.我让运维给出慢查询log. Oh,my god-慢查询记录太多,都是一秒钟以上的…