rollup和webpack

rollup和webpack的区别

特性:
   rollup 所有资源放同一个地方,一次性加载,利用 tree-shake特性来  剔除未使用的代码,减少冗余
   webpack 拆分代码、按需加载  webpack2已经逐渐支持tree-shake
   rollup:
     1.打包你的 js 文件的时候如果发现你的无用变量,会将其删掉。
     2.可以将你的 js 中的代码,编译成你想要的格式
   webpack:
    1.代码拆分
    2.静态资源导入(如 js、css、图片、字体等)
    拥有如此强大的功能,所以 webpack 在进行资源打包的时候,就会产生很多冗余的代码。
应用场景:
   项目(特别是类库)只有 js,而没有其他的静态资源文件,使用 webpack 就有点大才小用了,因为 webpack bundle 文件的体积略大,运行略慢,可读性略低。这时候 [rollup](https://github.com/rollup/rollup)就是一种不错的解决方案

Rollup 的好处

  • Tree Shaking: 自动移除未使用的代码, 输出更小的文件
  • Scope Hoisting: 所有模块构建在一个函数内, 执行效率更高
  • Config 文件支持通过 ESM 模块格式书写
  • 可以一次输出多种格式:IIFE, AMD, CJS, UMD, ESM
  • Development 与 production 版本: .js, .min.js
  • 文档精简

基础插件

  • rollup-plugin-alias: 提供 modules 名称的 alias 和 reslove 功能.
  • rollup-plugin-babel: 提供 Babel 能力, 需要安装和配置 Babel (这部分知识不在本文涉及)
  • rollup-plugin-eslint: 提供 ESLint 能力, 需要安装和配置 ESLint (这部分知识不在本文涉及)
  • rollup-plugin-node-resolve: 解析 node_modules 中的模块
  • rollup-plugin-commonjs: 转换 CJS -> ESM, 通常配合上面一个插件使用
  • rollup-plugin-replace: 类比 Webpack 的 DefinePlugin , 可在源码中通过 process.env.NODE_ENV 用于构建区分 Development 与 Production 环境.
  • rollup-plugin-filesize: 显示 bundle 文件大小
  • rollup-plugin-uglify: 压缩 bundle 文件
  • rollup-plugin-serve: 类比 webpack-dev-server, 提供静态服务器能力

rollup:https://www.rollupjs.com/
webpack:https://www.webpackjs.com/

阅读 149

推荐阅读

超实用web前端项目代码段总结

1 人关注
11 篇文章
专栏主页
目录