【前端】前端构建是否需要升级

在对着产品高举中指怒发心中之愤后，真正能够解决问题的是自身上的改变，有句话说的好：你虽然改变不了全世界，但是你有机会改变你自己。秉承着“不听老人言，吃亏在眼前”的优良作风，我还是决定玩火自焚。

问题所在

之前的项目总结为以下内容：

1、AMD模块规范开发，使用requirejs实现，使用rjs打包，最终导致的结果是，输出的项目臃肿，肿的就像一坨狗不理……不忍直视
2、使用gulp进行打包，这一点貌似没有可吐槽的地方，毕竟都是被grunt折磨过来的……
3、数据的渲染使用模板引擎，这就意味着你要手动管理DOM，这样，你的业务代码参杂着你的数据处理、DOM管理，满屏幕的毛线……
4、模块化不足，虽然使用require进行了模块管理，但是大部分业务逻辑还是充斥在一个文件里，这与最近流行的组件化概念冰火不容，拒绝落后……
5、诸如 扩展性 、 维护性 我想早已不言而喻，不需赘述，再述就真TM是累赘了。

新框架要解决的问题：

1、要使构建输出的项目像你邻家小妹妹一样、瘦的皮包骨。（也许是营养不良）
2、要实现真正的模块化、组件化的开发方式，真正去解决维护难、扩展难的问题。（从此不怕产品汪）
3、业务逻辑专注数据处理，手动管理DOM的年代就像……像什么呢？（毕竟成人用品也越来越自动化了）
4、等等…….（其实好处无需赘述，来，往下看）

为了达成以上目标，我们探讨一下解决方案：

1、老项目的构建输出为什么臃肿？

答：因为使用的是require的rjs进行构建打包的，了解rjs的都知道，它会把项目所有依赖都打包在一个文件里，如果项目中有很多页面依赖这个模块，那么rjs并不会把这个模块提取出来作为公共模块，所以就会有很多复制性的内容，所以项目自然臃肿。

解决方案：使用webpack配合相应的loader，来完成模块加载和构建的工作。

2、老项目为什么模块化的不足？

答：老项目的模块化，仅仅体现在js层面，解决了模块引用的问题，但在开发方式上，依然可以看做是过程式的，这样的结果就导致了项目的难扩展和难维护，让开发人员在与产品汪的对峙中，并不从容。

解决方案：Vue.js能够很好的解决组件化的问题，配合 Vue.js 官方提供的 vue-loader 能够很好的结合webpack做组件化的开发架构。

3、如何避免手动管理DOM？

答：如果你在做数据展示这一块的开发工作，相信你一定体会颇深，发送http请求到服务端，拿到返回的数据后手动渲染DOM至页面，这是最原始的开发方式，无非再加一个模板引擎之类的，但最终还是避免不了手动渲染，如果页面逻辑复杂，比如给你来一个翻页的功能，再来一个筛选项，估计你会觉得世界并不那么美好。

解决方案：MVVM模式能够很好的解决这个问题，而Vue.js的核心也是MVVM。

具体详见

http://www.cnblogs.com/linfangshuhellowored/p/5657285.html