webpacl vs rollup

[into-piece]

webpack

1. 代码分割 模块依赖关系
2. loader
3. 插件系统

Rollup

Rollup是下一代JavaScript模块打包工具。开发者可以在你的应用或库中使用ES2015模块，然后高效地将它们打包成一个单一文件用于浏览器和Node.js使用。 Rollup最令人激动的地方，就是能让打包文件体积很小。这么说很难理解，更详细的解释：相比其他JavaScript打包工具，Rollup总能打出更小，更快的包。因为Rollup基于ES2015模块，比Webpack和Browserify使用的CommonJS模块机制更高效。这也让Rollup从模块中删除无用的代码，即tree-shaking变得更容易。

Tree-shaking

这个特点，是Rollup最初推出时的一大特点。Rollup通过对代码的静态分析，分析出冗余代码，在最终的打包文件中将这些冗余代码删除掉，进一步缩小代码体积。这是目前大部分构建工具所不具备的特点(Webpack 2.0+已经支持了，但是我本人觉得没有Rollup做得干净)。

[into-piece]

webpack打包出来的文件里面有很多__webpack_require__工具函数的定义，可读性也很差，而rollup打包出来的js会简单一点。

[into-piece]

webpack致力于复杂SPA的模块化构建，非常吸引人的是各种loader：

Essentially, webpack loaders transform all types of files into modules that can be included in your application’s dependency graph.

以一致的方式处理各种资源依赖，通过loader屏蔽掉了资源类型差异（js是module，css是module，img也是module……），优势如下：

No more carefully placing your files in the right folders and hacked-together scripts for adding hashes to file URLs — webpack can take care of it for you.

另一些非常强大的特性包括：

1. Code Splitting：生产环境按需加载/并行加载
2. Tree Shaking：构建时去掉无用代码（export）
3. HMR：开发中模块热替换
4. Commons Chunk：构建时提取公共依赖
5. Dependency Graph：构建完毕输出模块依赖图，让bundle有了可读性