webpack和rollup

webpack

代码拆分

在 webpack 中，代码分离是最引人注目的特性之一。因为对于前端而言，资源包与依赖文件体积过大，将会直接影响性能。尤其是在移动互联网时代，大文件的加载问题也会使得用户体验直线下降，所以如何拆分代码，按需加载是目前很多应用所面临的问题。
在 webpack 的实现中，通过代码拆分功能将大的资源和依赖文件进行拆解，从而使得当用到某些资源时，能够就只加载这些文件，而避免加载无用资源，使用合理的话，会极大影响加载时间，提示用户体验。
目前 webpack 常用的代码分离方法有三种：
入口起点：使用 entry 配置手动地分离代码。
防止重复：使用 SplitChunksPlugin 去重和分离 chunk。
动态导入：通过模块中的内联函数调用来分离代码。

静态模块打包

在 webpack 的官网上写道，webpack是一个现代 JavaScript 应用程序的静态模块打包器，能够打包所有的资源，脚本，图片，样式表等一系列内容均可打包，这也是很多人选择使用webpack基本诉求。
在webpack实现各类资源打包时，由于webpack 自身只理解 JavaScript，所以对于除了 JavaScript 之外的资源需要使用 loader 让 webpack 能够去处理。loader 可以将所有类型的文件转换为 webpack 能够处理的有效模块，然后就可以利用 webpack 的打包能力，对它们进行处理。

插件机制

在webpack中，插件可以完成更多 loader 不能完成的功能，webpack 内部以插件的形式提供了灵活强大的自定义 api 功能，其本身暴露了 webpack 在运行的整个生命周期钩子函数，从而方便注册插件和使用插件，可见 webpack 的插件是直接对整个构建过程其作用。

rollup

JavaScript 模块打包器

Rollup 是一个 JavaScript 模块打包器，可以将小块代码编译成大块复杂的代码，例如一些后台语言的编译功能，将代码压缩成一个 library 或应用程序，Rollup 对代码模块使用新的 ES6 版本中的标准化格式，并非是 CommonJS 和 AMD这种自定义的解决方案。

Tree-shaking

Tree-shaking, 也被称为 “live code inclusion” ，指清除在项目中没有实际用到的冗余代码。相比于Webpack和Browserify使用的CommonJS 模块机制，Rollup 中使用 ES6 版本中的Modules标准格式编写模块代码，使得Rollup对代码做静态分析和从模块中删除无用的代码时更加高效，更容易。

Vue 的作者尤雨溪在知乎里回答，关于 Rollup 之所以能高效的用Tree-shaking 来消除无用的代码主要为以下四个原因。

1. import 只能作为模块顶层的语句出现，不能出现在 function 里面或是 if 里面。
2. import 的模块名只能是字符串常量。
3. 不管 import 的语句出现的位置在哪里，在模块初始化的时候所有的 import 都必须已经导入完成。
4. import binding 是 immutable 的，类似 const。比如说你不能 import { a } from ‘./a’ 然后给 a 赋值个其他什么东西。

   二者差异

   Rollup 已被许多主流的 JavaScript 库使用，也可用于构建绝大多数应用程序。但是 Rollup 还不支持一些特定的高级功能，尤其是用在构建一些应用程序的时候，特别是代码拆分和运行时态的动态导入。如果你的项目中更需要这些功能，那使用Webpack可能更符合你的需求。与Webpack 偏向于应用打包的定位不同，rollup.js 更专注于 Javascript 类库打包。
   webpack和rollup的使用分类

Webpack 适合在应用层级 Web App 上使用，而Rollup 更适合使用在独立的 JavaScript 模块库上。

有许多网站和应用程序使用 Rollup 构建，同样的也有大量的类库使用了 webpack 构建。

对于打包工具的选择，这时候还是要看你具体的需求，如果你的诉求是需要代码拆分，或者你有很多静态资源需要处理，再或者你构建的项目需要引入很多 CommonJS 模块的依赖，那应该选择 webpack 。但是如果你的代码库是基于 ES6 模块的，而且希望你写的代码能够被其他人直接使用，你更需要的打包工具可能是 Rollup。
————————————————