前言 因为比较菜,所以经常需要读一些别人的代码学习学习. 有源码的代码当然好,但是很多网站不开源.这些网站的 js 又都是打包压缩过的,学习起来很难受. 所以我做了一个小工具,通过修改抽象语法树,来处理这些打包压缩过的 js,增强代码可读性,让我们学习起来更容易. 如果再借助重定向线上 js 到本地 js,或者使用 chrome 自带的 override 源码能力,甚至可以轻松调试别人的线上代码. 有了这个工具,我 CV 界大师兄的名号可谓实至名归. 下面是这个工具的代码仓库:boompack.…

写在前面 不管是做前端的还是做后台的,不管是懂javaScript的还是不太懂JavaScript的人,我想都或多或想的知道些许js压缩对于页面性能提升的效应吧. 之前老喜欢用在线压缩工具去压缩js,其实想想之前的这个做法就有些不寒而栗,假设一下,如果一个项目中的js有50个的话,你要去用在线压缩工具压缩js50次吗?仅仅发布一次就压缩50次,那是不是每个发布项目的时候都要去做这个工作,这是多么重复而双乏味的事情. 再假设,不同页面上引用了相同的n个js,如果我们只是按照单独的js去压缩的话,那…

一.故事总有其背景 年末将至,很多闲适的时间,于是刷刷微博,接触各种纷杂的信息——美其名曰“学习”.运气不错,遇到了一个新名词,uglifyjs. 据说是用来压缩JS文件的,据说还能优化JS,据说是基于node的,还据说比Google Closure Compiler更带感,哦?激起了我的好奇心.百之谷之,哟,相关的介绍还不少.然后折腾了个把小时,基本上知道了是个怎么回事. 我觉得吧,还是有些用的,即使是不是从事node开发的人,抽个小空,share之,于是就有了本文.人总有浮躁的时候,我也不例…

最近很懒散,个人感情.家庭原因,没有动力去学东西,老是发誓要搞好前端工程化,老中断,唉!没有魄力! 最近老觉得这前端工程化有什么好的,东西那么多,还得学!直到前几天产品提了个优化,说搜索结果页跳商品详情页时很慢,以前都以为是js里的ajax请求导致跳转慢,仔细想想不对,如果是ajax的问题,顶多是空白页,现在问题是跳转这么慢,url变了,页面上还是搜索结果页,这不对啊,好吧,F12搞起来,一看都浪费到请求资源上了,比如请求css.js.img上了,虽然运维已经开了gzip,可是还是慢,所以压缩这…

Node的便民技巧-- 压缩代码 下载图片 压缩代码 相信很多前端的同学都会在上线前压缩JS代码,现在的Gulp Webpack Grunt......都能轻松实现.但问题来了,这些都不会,难道就要面对几十个JS文件一遍遍来回“复制-压缩-创建-粘贴”,这样太不人性化了. 于是可以借助Node + uglify-js 轻松实现.(前提你会点node操作) 1.首先看一下目录: |--uglifyJS |--js |--test1.js |--test2.js |--uglify.js   //这…

前言 Grunt是一款前端构建工具,帮助我们自动化搭建前端工程.它可以实现自动对js.css.html文件的合并.压缩等一些列操作.Grunt有很多插件,每一款插件实现某个功能,你可以通过npm命名去下载插件,然后使用它们.关于grunt的使用以及配置,卤煮不打算在此介绍.本篇博文重点要讲的是如何快速开发一款自定义的grunt插件.因为卤煮在打包合并代码的时候发现了无法将html和js混合的文件进行压缩处理,为此卤煮也翻了很多资料,没查找到理想的解决方案.在山穷水复之时,硬着头皮自己开发了一个简…

jQuery在使用grunt,bootstrap在使用grunt,百度UEditor在使用grunt,你没有理由不学.不用! 1. 前言 各位web前端开发人员,如果你现在还不知道grunt或者听说过.但是不会熟练使用grunt,那你就真的真的真的out了(三个“真的”重复,表 示重点).至于grunt的作用,这里不详细说了,总之你如果做web前端开发,你一定要用grunt.还有一点,它完全免费,没有盗版.既强大又免费的 东西,为何不用? 当然了,你如果你能找到更好的替代grunt的其他工具也是…

最近做的前端项目中发现引用的js包太多,导致页面加载时反应很慢,所以首先想到的是将js和css压缩,提高加载速度. 我们先来看看抓到的当前页面响应时间: 页面异步加载,需要响应时间 7.41秒,这也太慢了,实在受不了了. 下面我们引入gulp 对js做压缩,gulp是基于Node.js的前端构建工具.所以首先需要安装nodejs ,因为我的项目本身就是node项目,所以直接装gulp就好.全局安装gulp,命令如下 npm install -g gulp 需要安装的依赖项下面这些,依次安装就好了…

压缩js文件 打开IIS 7的配置文件:c:\windows\system32\inetsrv\config\applicationhost.config 在<staticContent lockAttributes="isDocFooterFileName">中添加: <remove fileExtension=".js" /><mimeMap fileExtension=".js" mimeType="…

一.想要实现eCharts线状图表的断点效果,如图(后来又查到数据格式为data:['-', 2, 3,'-' , 5, 6, 7]:也可以断点显示) 这种效果,在设置数据的时候应该是这样: data:[, 2, 3, , 5, 6, 7]:但是想要动态添加数据,实现方式有两种 1.拼接字符串法:var str='[, 2, 3, , 5, 6, 7]';var arr=eval(str); 2.改变数组长度法: var arr=[]; for(var i=1;i<8;i++){ if(i==1…