• 亲身实践 yui-compressor压缩js和css


    最近很懒散,个人感情、家庭原因,没有动力去学东西,老是发誓要搞好前端工程化,老中断,唉!没有魄力!

    最近老觉得这前端工程化有什么好的,东西那么多,还得学!直到前几天产品提了个优化,说搜索结果页跳商品详情页时很慢,以前都以为是js里的ajax请求导致跳转慢,仔细想想不对,如果是ajax的问题,顶多是空白页,现在问题是跳转这么慢,url变了,页面上还是搜索结果页,这不对啊,好吧,F12搞起来,一看都浪费到请求资源上了,比如请求css、js、img上了,虽然运维已经开了gzip,可是还是慢,所以压缩这些东西迫在眉睫,这才明白到前段工程化,webpack里的那些压缩、编译很有必要啊!并不是大神们闲的蛋疼,想到前几天一个博文:只有自己亲身实践了前后端分离, 才能理解其他人提的优缺点到底是否存在, 才能比别人更深刻一些。谁厉害不厉害就看谁感受的更深刻而已。

    好了不扯了,开始。

    1. 下载jar包,要配置到webstorm中。地址:https://github.com/yui/yuicompressor/releases

    2. webstorm中 file—setting—file watchers—点+号—选【YUI Compressor JS】— 把Program配 刚才下载的jar包地址。上图

    3. ok,配置完成。

    找个js试试,点个空格或者回车就会自动压缩,在当前文件的下边会生成月一个min文件,代码里引用它即可。

    注意:css同样道理。重复步骤2。YUI compressor可以压缩js也可以压缩css哦!

    -------这些都太low了,若想高薪,赶紧上手前端工程化那一套吧,vue + vue-router + vuex + webpack + ES6 搞起来!记住自己要先写好一些公用的组件,以便以后直接拷贝,让别人觉得你是个大神 [捂脸笑]。--------

  • 相关阅读:
    ElementUI的Upload上传,配合七牛云储存图片
    Vue : props 使用细节(父组件传递数据给子组件)
    vue弹窗插件实战
    vue实现单选多选反选全选全不选
    Vue.js新手入门指南
    ref 与 $refs 如何关联
    input框只允许输入正整数、正数(包含小数)的解决方法 vue.js实现
    Vue.js 使用 Swiper.js 在 iOS 11 时出现错误
    svn使用规范
    Android 动态设置控件获取焦点
  • 原文地址:https://www.cnblogs.com/chenguangliang/p/9273310.html
Copyright © 2020-2023  润新知