前端工程师外包中打包工具之webpack介绍

点击量：7424 2020-10-18 12:20:04

什么是webpack?

   稍复杂一点软件前端开发项目的同学都会知道，一个包含前端的项目，里面可能有多个.js,多个.css,多个静态图片，多个其他前端资源。一些js资源彼此之前存在依赖关系，当一个页面需要加载多个.js的话，也会拖累整个页面的加载速度。

所以为了解决这个问题，如图所示，webpack就把左边的各种各样的静态资源，打包成了一个所谓的 assets. 这样浏览器加载起来就快多了。

同样是前端打包工具, webpack与grunt、gulp的不同？

   三者都是前端构建工具，grunt和gulp在早期比较流行，现在webpack相对来说比较主流，不过一些轻量化的任务还是会用gulp来处理，比如单独打包CSS文件等。

   grunt和gulp是基于任务和流（Task、Stream）的。类似jQuery，找到一个（或一类）文件，对其做一系列链式操作，更新流上的数据，整条链式操作构成了一个任务，多个任务就构成了整个web的构建流程。

   webpack是基于入口的。webpack会自动地递归解析入口所需要加载的所有资源文件，然后用不同的Loader来处理不同的文件，用Plugin来扩展webpack功能。

所以总结一下：

   从构建思路来说

   gulp和grunt需要软件前端开发者将整个前端构建过程拆分成多个Task，并合理控制所有Task的调用关系，webpack需要开发者找到入口，并需要清楚对于不同的资源应该使用什么Loader做何种解析和加工

   从知识背景来说

   gulp更像后端开发者的思路，需要对于整个流程了如指掌webpack更倾向于前端开发者的思路

与webpack类似的工具还有哪些？

   同样是基于入口的打包工具还有以下几个主流的：

   webpack

   rollup

   parcel

   从应用场景上来看：

   webpack适用于大型复杂的前端站点构建

   rollup适用于基础库的打包，如vue、react。

   parcel适用于简单的实验性项目，他可以满足低门槛的快速看到效果

   由于parcel在打包过程中给出的调试信息十分有限，所以一旦打包出错难以调试，所以不建议复杂的项目使用parcel

如何利用webpack来优化前端性能？（提高性能和体验）

   用webpack优化前端性能是指优化webpack的输出结果，让打包的最终结果在浏览器运行快速高效。

   压缩代码。删除多余的代码、注释、简化代码的写法等等方式。可以利用webpack的UglifyJsPlugin和ParallelUglifyPlugin来压缩JS文件， 利用cssnano（css-loader?minimize）来压缩css

   利用CDN加速。在构建过程中，将引用的静态资源路径修改为CDN上对应的路径。可以利用webpack对于output参数和各loader的publicPath参数来修改资源路径

   删除死代码（Tree Shaking）。将代码中永远不会走到的片段删除掉。可以通过在启动webpack时追加参数--optimize-minimize来实现

提取公共代码。