前端项目打包

打包是在做什么

前端写代码时为了方便会将代码写在许多文件中(模块化，方便代码后期维护与功能升级等)，但是转化成HTML代码时，会使用<script>标签进行引入js代码，这样会使页面在渲染时衍生更多的http请求各个静态资源，页面加载耗能增加。使用打包过后将许多零碎的文件打包成一个整体，页面只需请求一次，js文件中使用模块化互相引用（export、import ），这样能在一定程度上提供页面渲染效率。
打包同时会进行编译，将ES6、Sass等高级语法进行转换编译，以兼容高版本的浏览器。

必须要打包吗？

上文提到的HTML需要引用有很多文件会导致请求的数量很多，但如果页面请求一次的话页面需要将许多次请求压缩成一次，就会导致页面第一次加载很慢，这也是打包过程中的一个弊端。
但是反过来想，假如这个工程很小，那么打包还是必需的吗？为了提升一点点的效率需要多加很多的工作量，这样明显是划不来的。
其次，打包另一个重要作用是编译，将浏览器无法识别的ES6等高级语法编辑成浏览器可识别的ES5语法，但假如有一天浏览器可以识别ES6甚至ES7等语法，那么Babel、webpack就不是必须的了。

但是目前为止浏览器版本、项目量级导致现在打包还是比较有必要的。

怎么打包

现在比较流行的打包工具有Webpack、Gulp、Grunt。

但是Gulp、Grunt与其说是打包工具不如说是构建工具。