Webpack和Rollup的对比

• Webpack

  Webpack是一个现代JavaScript应用程序的静态模块打包器。当Webpack处理应用程序时，它会递归地构建一个依赖关系图，其中包含应用程序需要的每个模块，然后将所有这些模块打包成一个或多个bundle。

  • 拆分代码： 这一特性允许开发者将自己的代码分离成各种包，这些包将作为异步依赖按需或并行加载，从而优化资源负载。例如分离三方库避免频繁刷新缓存浪费资源，分离css以便浏览器能够并行加载样式文件，运行时动态导入路由等。
  • 运行时态的动态导入： 导入模块现有的语法形式是静态声明，通过传递明确的字符串作为模块说明，但是在某些特殊情况下，即运行时才获取到所需因素（如用户操作等），我们希望能够根据一定条件动态加载资源，webpack特定的require.ensure()和import()语法就提供了这种可能性。

• Rollup

  Rollup是一个JavaScript模块打包器，可以将小块代码编译成大块复杂的代码，例如library或应用程序。Rollup对代码模块使用新的标准化格式，这些标准都包含在JavaScript的ES6版本中，而不是以前的特殊解决方案，如CommonJS和AMD。ES6 模块可以使你自由、无缝地使用你最喜爱的 library 中那些最有用的独立函数，而你的项目不必携带其他未使用的代码。ES6 模块最终还是要由浏览器原生实现，但当前 Rollup 可以使你提前体验。[2]

  • tree-shaking： 将开发者引用的模块中未使用的代码剥离，不打包进最终文件，删除模块中无用的代码，bundle代码基本和源码没差，打出的包更小，执行更快。
  • 兼容性高： 可以自由打包成目前常规的模块类型（如CommonJS和ES6），兼容各个浏览器标准，ES6模块的支持意味着开发者可以直接使用import和export而不需要引入babel。

• 结论：

  • Webpack更适用于应用构建，它提供了更丰富的静态资源处理、代码分割、热模块替换等操作。
  • Rollup更适合打包共享库，它可以使你的代码库更精简、更方便地被他人使用。