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/