链接：https://juejin.im/post/5c8852f95188257a323f5cee
来源：掘金
著作权归作者所有。商业转载请联系作者得到授权，非商业转载请注明出处。
近几个月，接手了一个老项目的重构方案，有多老呢？便是前端青铜时期的项目，一个前后端都在同一个锅里的项目、完备没有利用任何的打包工具。
后台 php + YII 渲染页面前端 html、css、js三剑客 加上 jQuery 复制粘贴便是干。前端不足后端来凑。如果前端有一些需求不是很繁芜的话，后端职员有时候也会兼顾的干一些前真个活。
后来我也开始卖力这个项目的需求开拓。做了几个需求后，对付我一个用习气了ES6 加 webpack 模块化开拓来说，觉得想吐血啊。
前端一个JS文件文件 少说 2000 行代码，多则 4-5000，代码多也就算了，关键是写的代码没有任何规范，从文件开始便是
function funName () {}function funName () {}function funName () {}...// 或者是$(function(){})$(function(){})$(function(){})...
这也就算了，关键是 一个 ajax的回调处理就有 ... 6-700 行代码
后来我看了下这么长的代码是要处理什么，结果一看 ... 原来一个for循环就占了600多行代码了。
算了，不想再说了，越说越心累。
毕竟拿人钱财，替人消灾。活还是要干的。
1. 重构方案这种项目最大的一个问题便是没有模块化开拓，所有功能都写在一个js文件里。在开拓了几个需求后、总结了有以下几个效率比较低的流程。
现存在的问题
没有模块化开拓，一个js文件几千行代码。代码复用率低。听说有些公司有上万行代码的。求他们的生理阴影面积PHP的各种模板语法，前端职员表示看不懂所有资源文件都是手动添加版本号精灵图须要手动合成 （这个最坑，效率特殊低）图片压缩也是手动压缩掌握台各种console.log的输出...2. 接入模块化开拓考虑到目前团队的前端水平不是很高，以是利用 随意马虎上手的 vue，然后利用 vue-cli3搭建一个 vue 项目，然后在进行一些配置以兼容现有项目，这些配置根据项目的不同，也是不同的，以是这里不展开细说。
实在利用 vue-cli3搭建起来的项目，已经帮我们办理了大部分的问题。
模块化的开拓，vue 本身支持模块化开拓资源文件都是手动添加版本号，利用webpack打包后的文件名会有 hash值。以是也办理了版本号的问题。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.
在 19201080的屏幕上看是正常的，但是有些客户的是条记本电脑，利用条记本电脑看的话就太大了。没有做自适应。
如果要一个一个的把 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
如果大家还有什么更好的实践办法，欢迎评论区指教！
！
项目地址 https://github.com/lentoo/vue-admin 欢迎 star
