最近在看Vue源码的时候发现一个新的打包工具Rollup.js,之前没有听说过这个工具,也不了解Rollup.js相比于常用的打包工具webpack有什么异同和优势,随后查了一下了解到Vue,React,D3,Three.js,Moment源码里都有它的身影,Rollup到底什么?这篇文章带你走进Rollup的世界。
因为笔者习惯在学习新东西的时候,先从已经了解掌握类似功能的东西出发,寻找差异点,由浅入深,渐进学习,故此篇先从耳熟能详的webpack开始讲起。
在webpack的官网上写道,webpack是一个现代JavaScript 应用程序的静态模块打包器,能够 打包所有的资源,脚本,图片,样式表等一系列内容均可打包,这也是很多人选择使用webpack基本诉求。
本质上,webpack的loader 可以将所有类型的文件,都转换为应用程序的依赖图和最终的打包结果可以直接引用的模块。 目前在官网提供了很多的loader,当然你有兴趣可以写一个自己的loader,通过自定义加载去使用。
webpack的几大特性
代码拆分
在webpack中,代码分离是最引人注目的特性之一。 因为对于前端而言,资源包与依赖文件体积过大,将会直接影响性能。 尤其是在移动互联网时代,大文件的加载问题也会使得用户体验直线下降,所以如何拆分代码,按需加载是目前很多应用所面临的问题。 在webpack的实现中,通过代码拆分功能将大的资源和依赖文件进行拆解,从而使得当用到某些资源时,能够就只加载这些文件,而避免加载无用资源,使用合理的话,会极大影响加载时间,提示用户体验。目前webpack常用的代码分离方法有三种:
入口起点:使用 entry 配置手动地分离代码。
防止重复:使用 SplitChunksPlugin 去重和分离 chunk。
动态导入:通过模块中的内联函数调用来分离代码。
静态模块打包
在webpack的官网上写道,webpack是一个现代JavaScript 应用程序的静态模块打包器,能够 打包所有的资源,脚本,图片,样式表等一系列内容均可打包,这也是很多人选择使用webpack基本诉求。
本质上,webpack的loader 可以将所有类型的文件,都转换为应用程序的依赖图和最终的打包结果可以直接引用的模块。 目前在官网提供了很多的loader,当然你有兴趣可以写一个自己的loader,通过自定义加载去使用。