这标题一点营销号味道都没有,怎么会有人看啊!(笑) 没人看也无所谓的文章背景: 八月份入职了新公司,是个好几年的老项目了,公司产品是存在很久了,但我接触到的代码版本保守估计应该是有个三年到四年这样的历史,所以期间应该是换工具重构了一遍.公司最开始没前端,然后不知道哪位大哥建项目的时候选择建成多页面应用,分功能模块打包,后来被招我进来的大哥(也是前端的负责人)改成了单页面应用,但因为改造不完整,导致留下了些后遗症,表面上主要体现在热重载速度极慢,以及打包体积巨大.编译耗时长,jenkins完整推一…

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

Webpack性能优化的方式有很多种,本文之所以将 dll 单独讲解,是因为 dll 是一种最简单粗暴并且极其有效的优化方式. 在通常的打包过程中,你所引用的诸如:jquery.bootstrap.react.react-router.redux.antd.vue.vue-router.vuex 等等众多库也会被打包进 bundle 文件中.由于这些库的内容基本不会发生改变,每次打包加入它们无疑是一种巨大的性能浪费. Dll 的技术就是在第一次时将所有引入的库打包成一个 dll.js 的文件,将…

一次非常有趣的 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…

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

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

在前文 Webpack 打包优化之体积篇中,对如何减小 Webpack 打包体积,做了些探讨:当然,那些法子对于打包速度的提升,也是大有裨益.然而,打包速度之于开发体验和及时构建,相当重要:所以有必要对其做更为深入的研究,以便完善工作流,这就是本文存在的缘由. Webpack Package optimization 减小文件搜索范围 在使用实际项目开发中,为了提升开发效率,很明显你会使用很多成熟第三方库:即便自己写的代码,模块间相互引用,为了方便也会使用相对路劲,或者别名(alias):这中间…

谈及如今欣欣向荣的前端圈,不仅有各类框架百花齐放,如Vue, React, Angular等等,就打包工具而言,发展也是如火如荼,百家争鸣:从早期的王者Browserify, Grunt,到后来赢得宝座的 Gulp, 以及独树一帜的 fis3, 以及下一代打包神器 Rollup :在 browserify,grunt,gulp,rollup,webpack 可以一窥其中部分对比.在本文要探究的是,当前打包工具绝对霸者 Webpack. Webpack Package optimization W…

webpack 性能优化 dll 分包 html-webpack-externals-plugin DLLPlugin https://www.webpackjs.com/configuration/ https://webpack.js.org/plugins/dll-plugin/#dllplugin old dll 的方式好像在webpack4里面应用的不是很多了,webpack4已经做了优化:我查看了下vue-cli以及create-react-app都抛弃了这个配置,具体原因地址:ht…

目录 1. noParse 2. 包含和排除目录 3. IgnorePlugin 4. happypack 5. DllPlugin动态链接库 6. 热更新 7. 开发环境 tree-shaking 8. 抽离公共代码 9. 懒加载 1. noParse 作用主要是过滤不需要解析的文件,比如打包的时候依赖了三方库(jquyer.lodash)等,而这些三方库里面没有其他依赖,可以通过配置noParse不去解析文件,提高打包效率. 是module中的一个属性,设置一个正则表达式,过滤多个库以|分割…