Webpack vs Rollup
官方定义¶
-
Rollup 是一个 JavaScript 模块打包器，可以将小块代码编译成大块复杂的代码，例如 library 或应用程序
-
Webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)。当 webpack 处理应用程序时，它会递归地构建一个依赖关系图(dependency graph)，其中包含应用程序需要的每个模块，然后将所有这些模块打包成一个或多个 bundle。
应用场景¶
使用Rollup的开源项目：
- vue
- vuex
- vue-router
使用webpack的项目：
- elemnt-ui
- mint-ui
- vue scaffold
结论¶
- Rollup 偏向应用于 js 库，只是 js 代码，希望做 ES 转换，模块解析；
- Webpack 偏向应用于前端工程, 涉及到 css、html，涉及到复杂的代码拆分合并；
- 对于 应用 使用 Webpack，对于 类库 使用 Rollup。
- Webpack 对于代码分割和静态资源导入有着“先天优势”，并且支持热模块替换(HMR)；
- Rollup对于代码的Tree-shaking和ES6模块有着算法优势上的支持，能让打包文件体积很小。