前沿

项目地址 vue-admin 欢迎 star

近几个月,接手了一个老项目的重构规划,有多老呢?就是前端青铜时代的项目,一个前后端都在同一个锅里的项目、完全没有使用任何的打包工具。

  • 后台 php + YII 渲染页面
  • 前端 htmlcssjs三剑客 加上 jQuery 复制粘贴就是干。

前端不够后端来凑。如果前端有一些需求不是很复杂的话,后端人员有时候也会兼顾的干一些前端的活。

后来我也开始负责这个项目的需求开发。做了几个需求后,对于我一个用习惯了ES6 加 webpack 模块化开发来说,感觉想吐血啊。

前端一个JS文件文件 少说 2000 行代码,多则 4-5000,代码多也就算了,关键是 写的代码没有任何规范,从文件开始就是

function funName () {}
function funName () {}
function funName () {}
...
// 或者是
$(function(){})
$(function(){})
$(function(){})
...

这也就算了,关键是 一个 ajax的回调处理就有 ... 6-700 行代码

后来我看了下这么长的代码是要处理什么,结果一看 ...

原来一个for循环就占了600多行代码了。

算了,不想再说了,越说越心累。

毕竟拿人钱财,替人消灾。活还是要干的。

1. 重构规划

这种项目最大的一个问题就是没有模块化开发,所有功能都写在一个js文件里。在开发了几个需求后、总结了有以下几个效率比较低的流程。

现存在的问题

  1. 没有模块化开发,一个js文件几千行代码。代码复用率低。听说有些公司有 上万行代码的。求他们的心理阴影面积
  2. PHP的各种模板语法,前端人员表示看不懂
  3. 所有资源文件都是手动添加版本号
  4. 精灵图需要手动合成 (这个最坑,效率特别低)
  5. 图片压缩也是手动压缩
  6. 控制台各种console.log的输出
  7. ...

2. 接入模块化开发

考虑到目前团队的前端水平不是很高,所以使用 容易上手的 vue,然后使用 vue-cli3搭建一个 vue 项目,然后在进行一些配置以兼容现有项目,这些配置根据项目的不同,也是不同的,所以这里不展开细说。

其实使用 vue-cli3搭建起来的项目,已经帮我们解决了大部分的问题。

  1. 模块化的开发,vue 本身支持模块化开发
  2. 资源文件都是手动添加版本号,使用webpack打包后的文件名会有 hash值。所以也解决了版本号的问题。

所以下面我们来解决 vue-cli3没有帮我们解决的问题

3. 图片压缩

在未接入 webpack 图片压缩之前,我们都是使用 某个在线图片压缩网站,将图片丢进去,然后生成一个压缩后的图片来使用。

如果只有一两张图片还好说,如果有很多张图片,这种方法效率肯定是不高的。

为了避免不加班,必须要自动化。解放自己双手。

  • 安装所需要的库
npm install img-loader imagemin imagemin-jpegtran imagemin-pngquant --save-dev
  • vue.config.js中配置

然后看看打包后的效果

npm run build

  • 未压缩的图片 图片大小 622kb

  • 压缩后的图片 图片大小 351kb

基本上看不出来差别。

注意:尽量在 production 环境在压缩,在 dev 环境下没必要压缩,影响打包速度。

4. 精灵图

在未接入 webpack 自动合成精灵图之前,我们都是使用 某个在线合成精灵图网站,将一堆小图片丢进去,然后自己测量 background-position 来定位背景图。遇到多个图片大小不一样的时候。 background-position的计算更是麻烦。

4.1 精灵图自动合成

  • 安装依赖

npm install postcss-sprites --save-dev

  • postcss.config.js 中添加配置

然后在代码中,直接引用图片即可

4.1 精灵图分组

如果引用的小图片很多,最终会导致生成的精灵图很大。这时候就需要将精灵图进行分组了。相同模块的精灵图合成一张。同理

  • 修改 postcss.config.js 的配置,添加 groupBy 属性

如果需要分组,只需在 assets/sprites 新建一个目录,该目录中的图片会单独的合成一张精灵图

5. 使用 vw,vh 自适应

之前项目都是使用 px 作为像素单位的,并且设计稿的尺寸是 1920x938.

1920*1080的屏幕上看是正常的,但是有些客户的是笔记本电脑,使用笔记本电脑看的话就太大了。没有做自适应。

如果要一个一个的把 px 转成 rem 或者 vw/vh 的话,工作量也是很大。

有没有工具直接能将现在的 px 直接转成 vw/vh呢?

肯定也是有的! postcss-px-to-viewport

  • 安装依赖

npm i postcss-px-to-viewport --save-dev

  • 修改 postcss.config.js 文件配置

通过 F12 可以发现,所有 px 单位都转成了 vw

6. production 环境自动删除console.log

记得有一个需求是删除项目中所有的 console.log 代码,当时就懵逼了,页面这么多。

使用vscode 全局搜索,发现有几十个页面有这个语句。

如果全部手动删除的话,又费时,又没效率。所以想到通过插件来删除

  • 安装需要的库

npm install babel-plugin-transform-remove-console --save-dev

  • 修改 babel.config.js 配置

npm run build 的时候,就会自动删除 console.log

如果大家还有什么更好的实践方式,欢迎评论区指教!!

项目地址 vue-admin 欢迎 star

使用 webpack 各种插件提升你的开发效率的更多相关文章

  1. Android开发的插件Code Generator与LayoutCreator的安装与使用,提升你的开发效率

    前言 大家好,给大家带来Android开发的插件Code Generator与LayoutCreator的安装与使用,提升你的开发效率的概述,希望你们喜欢 学习目标 掌握两个插件的安装和使用,能够实现 ...

  2. 提升你的开发效率,10 个 NPM 使用技巧

    对于一个项目,常用的一些npm简单命令包含的功能有:初始化一个文件夹(npm init),下载npm模块(npm install),创建测试(npm test) 和自定义脚本(npm run).但是, ...

  3. atitit.提升2--3倍开发效率--cbb体系的建设..

    atitit.提升开发效率--cbb体系的建设.. #--提升倍数,大概2--3倍.. #---cbb的内容 知识的,expt的,经验的技术的部件的问题库的角度.. #---cbb的层次,tech l ...

  4. 阿里工程师开发了一款免费工具,提升Kubernetes应用开发效率

    对于使用了Kubernetes作为应用运行环境的开发者而言,在同一个集群中我们可以使用命名空间(Namespace)快速创建多套隔离环境,在相同命名空间下,服务间使用Service的内部DNS域名进行 ...

  5. IDE 插件新版本发布,开发效率 “biu” 起来了

    近日,Cloud Toolkit正式推出了面向 IntelliJ 和 Eclipse 两个平台的新款插件,本文挑选了其中三个重大特性进行解读,点击文末官网跳转链接,可查看详细的版本说明. 本地应用一键 ...

  6. 可以提升3倍开发效率的 Intellij IDEA快捷键大全汇总(2019)

    整理了一下IDEA的常用快捷键,可以打印出来或者弄成图片设置为桌面,为广大的程序员们节省更多的时间去谈恋爱. 常用快捷键1 Ctrl+Shift + Enter,语句完成 “!”,否定完成,输入表达式 ...

  7. 【Unity】4.2 提升开发效率的捷径--导入 Unity 5.3.4 自带的资源包

    分类:Unity.C#.VS2015 创建日期:2016-04-06 一.简介 Unity自带的资源包也称为标准资源包.换言之,Unity自带的所有标准资源包导入到Unity项目中以后,都会放在Pro ...

  8. 通过设置启用 Visual Studio 默认关闭的大量强大的功能提升开发效率

    原文:通过设置启用 Visual Studio 默认关闭的大量强大的功能提升开发效率 使用 Visual Studio 开发 C#/.NET 应用程序,以前有 ReSharper 来不足其各项功能短板 ...

  9. springboot系列之04-提高开发效率必备工具lombok

    未经允许,不得转载 原作者:字母哥博客 本文完整系列出自:springboot深入浅出系列 一.前置说明 本节大纲 使用lombok插件的好处 如何安装lombok插件 使用lombok提高开发效率 ...

随机推荐

  1. springboot(五)-使用Redis

    Redis服务器 springboot要使用redis,首先当然要确保redis服务器能够正常跑起来. pom.xml 这里添加redis的依赖,当然也是springboot集成好的. <!-- ...

  2. [转] 利用shell创建文本菜单与窗口部件的方法

    [From] http://www.jb51.net/article/129460.htm 前言 创建交互式shell脚本最常用的方法是使用菜单.提供各种选项可以帮助脚本用户了解脚本能做什么,不能做什 ...

  3. 【记录】dvwa总结

    一.Brute Force 选择集束炸弹 设置payload stack attck 防御:密码加密,使用验证码,使用统一的参数代替帐号和密码. 二.Command Injection |,||,&a ...

  4. C++ GUI Qt4编程(01)-1.1Hello Qt

    1. 根据C++ GUI Qt4编程(第二版)整理2. 系统:centos7:  Qt版本:5.5.13. 程序:hello.cpp #include <QApplication> #in ...

  5. numpy.reshape使用条件

    np.array中的元素的个数,需要和转换的类型各个维度的乘积相等.如:\(6=2*3=1*2*3\) 另外,可以发现参数的对应关系为shape(num_dims, num_rows, num_col ...

  6. pipline --学习 (-)

    一,语法: 编写位置: pipline 启动docker pipeline { agent { docker 'maven:3.3.3' } stages { stage('build') { ste ...

  7. crontab -e

    crontab -e可以配置定时任务 0 */3 * * * cd /root/find && nohup qbittorrent-nox --webui-port=7070 & ...

  8. bootstrap日历插件地址

    http://www.bootcss.com/p/bootstrap-datetimepicker/

  9. (转)source、sh、bash、./执行脚本的区别

    source.sh.bash../执行脚本的区别  原文:https://www.cnblogs.com/sparkbj/p/5976100.html 1.source命令用法: source Fil ...

  10. Windows与Unix思想

    Unix与Windows的思想 Unix中的哲学是"一切皆文件",这里的一切皆文件是一个广泛的概念,有一些特殊的设备文件,在/dev目录下 物理设备在Unix中就对应一个特殊的设备 ...