前端工程化+Webpack

现在的前端已经不是以前的前端啦。以前的前端职责就是写写页面，改改样式，掉掉接口就OK，可如今随着公司规模越来越大、想做的业务越来越多，给前端带来的影响就是代码增大，代码增大导致的直接影响就是性能优化难，维护难度大。

1.性能优化

对于前端，性能优化必不可少，因为做前端就是做交互，用户的交互体验直接反应了前端工程师的能力，除了交互还有就是精准力。比如按钮与图片不对齐，布局出现问题等都是精准力不好导致的，所有好的产品的诞生都离不开精准力，因为细节决定成败。

现在来说说前端如何实现性能优化，以下几个字就能说清楚：

传输层面：减少请求
执行层面：减少重排与重绘

重排与重绘这个概念前面专门有一篇文章有讲解，请看：《重排与重绘》

传输层面从来都是优化的核心点，需要了解《浏览器内部工作原理》。

既然说到了前端性能优化这个东西上，我就简单说说如何实现性能优化？

2.传输层面

在传输层面可以大致分成两类来优化：

a.减少请求数

载入的资源分散会增加请求数，因此可以做以下事情：

1. 合并css、js文件，以此减少文件数，从而减少请求数
2. 合并背景图片，使用CSS Script，以此减少文件数，从而减少请求数
3. 使用CSS3来替换部分图片，以此减少文件数，从而减少请求数
4. 图片可以使用Icon Font，以此减少文件数，从而减少请求数
5. 图片转换成base64编码，原理即将二进制格式的图片转换成字符串，以此减少文件数，从而减少请求数
6. 延迟加载，如下拉列表图片应该随着下拉而去请求新的图片，按需加载，错误的做法就是列表的图片全部请求
7. 缓存，将依赖的js框架或公共的js文件或公共的css文件可以使用localStorage放本地，取的时候可以直接从本地获取

b.减轻请求大小

有些必须请求的东西（如单个页面js逻辑、css样式、图片等）就应该学会让它变得小巧，越轻小的资源，加载也就越快；
有些必须请求的接口（如获取页面的信息展示等）可以通过提升服务器宽带从而让请求速度提高，因此可以做以下事情：

1. js、css文件压缩，将写好的代码进行压缩，减轻了文件大小，从而减轻请求大小
2. 图片无损压缩，将使用的图片进行压缩，减轻了文件大小，从而减轻请求大小
3. 精简代码，将无效的CSS样式或JS逻辑去除，减轻了文件大小，从而减轻请求大小
4. 开启Gzip，Gzip开启以后会将输出到用户浏览器的数据进行压缩的处理，这样就会减小通过网络传输的数据量，从而减轻请求大小
5. CDN，即内容分发网络，目的是使用户可就近取得所需内容，解决Internet网络拥挤的状况

3.执行层面

如何减少重排与重绘这个问题不仅仅与代码有直接联系，还与架构有直接联系。
SPA，该架构的诞生，就是想解决当你用浏览器打开一个页面及跳转另一个页面所重复做的事情，怎么个重复法？

比如：当你打开页面的时候，
1.需要获取该页面的所有资源，包括html、js、css、图片等文件，
2.其次需要掉接口获取数据。

先说第一件事情：浏览器通过网络请求加载页面资源，在页面呈现之前无论如何都要经历以下过程，具体步骤如下：

1. HTML→DOM
2. CSS→CSSOM
3. DOM + CSSOM → Render Tree
4. 对Render Tree进行布局计算(Layout)
5. 对布局结果进行屏幕绘制(Paint)

每个页面的显示都会经历这五步，所以当你跳转到一个新的页面或来回切换页面时也会重新执行这五步。

再说第二件事情：如果是数据需要从后台获取的页面，需要在前端用JS加载样式并组装数据生成HTML插入页面，因此浏览器渲染过程必须等到页面加载完CSS，并且JS加载完数据拼装好HTML之后才能开始进行，具体步骤如下：

前端JS渲染由于违背了浏览器的优化策略，总是存在一个不可突破的瓶颈：

JS和数据没加载完，JS拼装数据的逻辑没执行完，浏览器不能开始正常的渲染流程。

总结一句：
重绘发生在是Render Tree，重排发生在Layout，SPA架构其目的就是想减少重排与重绘的次数

4.什么是前端工程化

又扯远了，明明在说前端工程化的事情，怎么一直在说前端性能优化的事情呢？因为前端工程化的诞生与前端性能优化有直接的联系。
前端每次性能优化的手段都是大同小异；
代码的可维护性也基本是在细分职责；
既然每次优化的目的是相同的，但每次实现的过程是相似的，那么工程化可能是这一切问题的最终答案。

总结一句：
前端工程化就是前端性能优化的具体实现，方便前端人员进行文件的代码检查、合并、压缩、混淆、去掉注释、css优化、图片优化、编译打包成发布版等一些列重复优化的工作。

5.前端构建工具

要想具体实现前端工程化，自然少不了工程化工具，也是现在俗称的”构建工具“。
前端构建工具也特别多，如：Grunt、Gulp、Webpack等
我用的是Webpack，理由很简答，因为功能强大，且与vue.js配合度更高。
下面说说什么是Webpack？
Webpack在Github上的网址是：**https://github.com/webpack/webpack**，Star星级数有1万5左右，以后肯定会更多。

Webpack是德国开发者Tobias Koppers开发的模块加载器兼打包工具，在webpack中，它能把各种资源，例如js（含jsx）、coffee、样式（含less/sass）、图片等都作为模块来使用和处理。因此,Webpack当中js可以引用css,css中可以嵌入图片dataUrl。
对应各种不同文件类型的资源,Webpack有对应的模块loader，去进行编译和解析，
比如：CoffeeScript用的是coffee-loader，其他还有很多：
http://webpack.github.io/docs/list-of-loaders.html
Vue用的是vue-loader，当然这是后话，在后面的章节我们再来说Vue+Webpack的具体实现。