在開啟這個篇章之前存捺，我決定先開一篇來講一下rollup姥饰，畢竟干活嘛蒲障，前戲要足闷沥。

做一個抉擇萎战，rollup vs webpack

webpack 于 2012 年由 Tobias Koppers 創(chuàng)立，旨在解決現(xiàn)有工具無法解決的難題：構(gòu)建復(fù)雜的單頁應(yīng)用程序（SPA）舆逃。特別是兩個功能對后期產(chǎn)生了很大的影響：

1. Code-splitting蚂维，通過代碼拆分戳粒，可以將您的應(yīng)用程序拆分為可管理的塊，這些塊可以按需加載虫啥。這意味著您的用戶獲得交互式站點的速度要比等待整個應(yīng)用程序下載和解析的速度快得多蔚约。

2. Static assets，可以將靜態(tài)資產(chǎn)（例如圖像和 CSS）導(dǎo)入到您的應(yīng)用中涂籽，并僅將其視為依賴關(guān)系圖中的另一個節(jié)點苹祟。

rollup 的創(chuàng)立確實因為另外的原因，利用 ES2015 模塊的巧妙設(shè)計评雌，盡可能高效地構(gòu)建 JavaScript 庫的統(tǒng)一可分發(fā)版本树枫。

讓我們逐個功能看看對比兩者之間的不同

以下內(nèi)容來自 webpack 官網(wǎng): https://webpack.js.org/comparison

大概放出來這么多，其他的大家可以去鏈接地址去看看景东。

從這個對比砂轻，我們可以看出，webpack簡直是完勝斤吐，甚至rollup感覺很丟人搔涝，什么都不行，你活在這個世上還有什么意義和措？

存在即合理 —— 黑格爾

讓我們拿出來一行有趣的對比：

19MB庄呈？意味著什么？意味著一個用戶如果以 1m/s 的速度派阱，需要 19s 才能下載完這個 js诬留。很可怕不是嗎？這個時候颁褂，你突然想到故响，我可以壓縮啊，是的颁独，我們可以利用uglify或者Terser進行壓縮彩届，但是，仍然誓酒，我們不可避免的樟蠕，19M 就算利用了壓縮，也僅可以壓縮在 6M 左右靠柑，如果再利用分chunk的形式寨辩，我們可以將主包降低到 2M 左右，但是這仍然是一個可怕的數(shù)字歼冰，空白的項目靡狞，都是這個大小，更何況我們會引入其他的包呢隔嫡？

反之rollup注意到了這點甸怕，所以我們用 rollup 打包的空白項目甘穿，僅有幾 kb。

Use webpack for apps, and Rollup for libraries

沒錯梢杭，webpack確實很強大温兼，但是也是有應(yīng)用范圍的，應(yīng)用是他的立足之地武契，如果是一個 libraries募判，則可以使用rollup。

2. 使用并且打包一個js-sdk

首先咒唆，我們定一個需求: 我們要收集用戶的性能數(shù)據(jù)届垫。

打開掘金的推薦頁面https://juejin.im/timeline/recommended，在 chrome 的控制臺我們可以輸入如下代碼钧排，得到數(shù)據(jù)如圖 1 所示：

console.log(performance.getEntries());

掘金推薦頁面

準備數(shù)據(jù)

我們現(xiàn)在的需求是收集這條數(shù)據(jù)之前的數(shù)據(jù)上報到后端進行數(shù)據(jù)分析敦腔。

// lib/PerformanceEntries.js
export default class {
  constructor() {
    this.entries = this._handleEntries();
  }

  _handleEntries() {
    const entries = window.performance.getEntries();
    const fptIndex = entries.findIndex(entry => entry.entryType === 'paint');
    return entries.slice(0, fptIndex);
  }

  getEntries() {
    return this.entries;
  }
}

解下來我們需要把這個數(shù)據(jù)上報上去

import PerformanceEntries from './lib/PerformanceEntries';

(async () => {
  const performanceEntries = new PerformanceEntries();
  const entries = performanceEntries.getEntries();
  try {
    const res = await fetch('https://server.save.data/api/v1/entries', {
      method: 'POST',
      body: JSON.stringify(entries),
    });
    // some code...
  } catch {}
})();

寫一個rollup.config.js

import babel from 'rollup-plugin-babel';
import commonjs from 'rollup-plugin-commonjs';
import resolve from 'rollup-plugin-node-resolve';
import { terser } from 'rollup-plugin-terser';

import { version } from './package.json';

export default {
  input: 'index.js',                              // 入口文件
  output: {
    file: 'dist/performance.{version}.js',        // 打包之后的文件名以及存放位置
    format: 'umd',                                // 以什么模式打包，支持umd,cmd,esm...
    name: 'ihap',                                 // 導(dǎo)出文件的名字
    exports: 'named',
  },
  plugins: {
    babel({
      exclude: ['node_modules'],                  // 忽略 node_modules
      runtimeHelpers: true,                       // 開啟體積優(yōu)化
    }),
    commonjs(),
    resolve({
      mainField: ['jsnext', 'main'],
      browser: true,
    }),
    terser(),
  },
}

babelrc還是不可少

{
  "presets": [
    [
      "@babel/preset-env",
      {
        "targets": {
          "esmodules": true
        }
      }
    ]
  ],
  "plugins": [
    "@babel/plugin-external-helpers",
    "@babel/plugin-transform-runtime",
    ["@babel/plugin-proposal-class-properties", { "loose": true }]
  ]
}

執(zhí)行恨溜，看看結(jié)果

代碼截圖

ok，沒有什么問題找前，我們執(zhí)行一下rollup -c

執(zhí)行過程

看一下我們打包之后的文件大小

文件大小

僅有772b糟袁，還是很喜人的。

那么問題來了躺盛，可以用嘛项戴？好的，我們稍微寫一個簡單的node槽惫，然后執(zhí)行一下周叮。

執(zhí)行結(jié)果

看，我們的結(jié)果發(fā)出去了界斜。

本集總結(jié)&下集預(yù)告

如何用rollup打包一個很小的文件仿耽，我們已經(jīng)學(xué)會了，下一張各薇，我們就要針對如何進行性能分析來研究了项贺。好的，大家下次見峭判，我是 ihap 技術(shù)黑洞的肥少开缎，喜歡我的話，記得關(guān)注點贊收藏林螃，愛我的可以微信支持我給我贊賞稗壬尽！