前端進(jìn)階（6） - webpack 之外的另一種選擇：rollup

stefan 發(fā)布于2019-08-23 11:28 / 568人閱讀

摘要：之外的另一種選擇對(duì)前端來(lái)說(shuō)是再熟悉不過(guò)的工具了，它提供了強(qiáng)大的功能來(lái)構(gòu)建前端的資源，包括等語(yǔ)言腳本，也包括等二進(jìn)制文件。所以，一個(gè)不錯(cuò)的選擇是，應(yīng)用使用，類(lèi)庫(kù)使用。

webpack 之外的另一種選擇：rollup

webpack 對(duì)前端來(lái)說(shuō)是再熟悉不過(guò)的工具了，它提供了強(qiáng)大的功能來(lái)構(gòu)建前端的資源，包括 html/js/ts/css/less/scss ... 等語(yǔ)言腳本，也包括 images/fonts ... 等二進(jìn)制文件。

其實(shí)，webpack 發(fā)起之初主要是為了解決以下兩個(gè)問(wèn)題：

代碼拆分（Code Splitting）: 可以將應(yīng)用程序分解成可管理的代碼塊，可以按需加載，這樣用戶(hù)便可快速與應(yīng)用交互，而不必等到整個(gè)應(yīng)用程序下載和解析完成才能使用，以此構(gòu)建復(fù)雜的單頁(yè)應(yīng)用程序（SPA）；

靜態(tài)資源（Static Assets）: 可以將所有的靜態(tài)資源，如 js、css、圖片、字體等，導(dǎo)入到應(yīng)用程序中，然后由 webpack 使用 hash 重命名需要的資源文件，而無(wú)需為文件 URL 增添 hash 而使用 hack 腳本，并且一個(gè)資源還能依賴(lài)其他資源。

正是因?yàn)?webpack 擁有如此強(qiáng)大的功能，所以 webpack 在進(jìn)行資源打包的時(shí)候，就會(huì)產(chǎn)生很多冗余的代碼（如果你有查看過(guò) webpack 的 bundle 文件，便會(huì)發(fā)現(xiàn)）。

比如，把 export default str => str; 這段代碼用 webpack 打包就會(huì)得到下面的結(jié)果：

/******/ (function(modules) { // webpackBootstrap
/******/     // The module cache
/******/     var installedModules = {};
/******/
/******/     // The require function
/******/     function __webpack_require__(moduleId) {
/******/
/******/         // Check if module is in cache
/******/         if(installedModules[moduleId]) {
/******/             return installedModules[moduleId].exports;
/******/         }
/******/         // Create a new module (and put it into the cache)
/******/         var module = installedModules[moduleId] = {
/******/             i: moduleId,
/******/             l: false,
/******/             exports: {}
/******/         };
/******/
/******/         // Execute the module function
/******/         modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
/******/
/******/         // Flag the module as loaded
/******/         module.l = true;
/******/
/******/         // Return the exports of the module
/******/         return module.exports;
/******/     }
/******/
/******/
/******/     // expose the modules object (__webpack_modules__)
/******/     __webpack_require__.m = modules;
/******/
/******/     // expose the module cache
/******/     __webpack_require__.c = installedModules;
/******/
/******/     // define getter function for harmony exports
/******/     __webpack_require__.d = function(exports, name, getter) {
/******/         if(!__webpack_require__.o(exports, name)) {
/******/             Object.defineProperty(exports, name, {
/******/                 configurable: false,
/******/                 enumerable: true,
/******/                 get: getter
/******/             });
/******/         }
/******/     };
/******/
/******/     // getDefaultExport function for compatibility with non-harmony modules
/******/     __webpack_require__.n = function(module) {
/******/         var getter = module && module.__esModule ?
/******/             function getDefault() { return module["default"]; } :
/******/             function getModuleExports() { return module; };
/******/         __webpack_require__.d(getter, "a", getter);
/******/         return getter;
/******/     };
/******/
/******/     // Object.prototype.hasOwnProperty.call
/******/     __webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); };
/******/
/******/     // __webpack_public_path__
/******/     __webpack_require__.p = "";
/******/
/******/     // Load entry module and return exports
/******/     return __webpack_require__(__webpack_require__.s = 0);
/******/ })
/************************************************************************/
/******/ ([
/* 0 */
/***/ (function(module, __webpack_exports__, __webpack_require__) {

"use strict";
Object.defineProperty(__webpack_exports__, "__esModule", { value: true });

/* harmony default export */ __webpack_exports__["default"] = (str => str);


/***/ })
/******/ ]);

這在以下的一些情境中就不太高效，需要尋求更好的解決方案：

需要 js 高效運(yùn)行。因?yàn)?webpack 對(duì)子模塊定義和運(yùn)行時(shí)的依賴(lài)處理（__webpack_require__），不僅導(dǎo)致文件體積增大，還會(huì)大幅拉低性能；

項(xiàng)目（特別是類(lèi)庫(kù)）只有 js，而沒(méi)有其他的靜態(tài)資源文件，使用 webpack 就有點(diǎn)大才小用了，因?yàn)?webpack bundle 文件的體積略大，運(yùn)行略慢，可讀性略低。

在這種情況下，就想要尋求一種更好的解決方案，這便是 rollup.

現(xiàn)在已經(jīng)有很多類(lèi)庫(kù)都在使用 rollup 進(jìn)行打包了，比如：react, vue, preact, three.js, moment, d3 等。

1. 工具

安裝

npm i -g rollup          # 全局安裝

npm i -D rollup          # 本地安裝

使用

rollup -c                # 使用一個(gè)配置文件，進(jìn)行打包操作

更多詳細(xì)的用法，參考 rollup.js - command-line-flags.

2. 配置

rollup 的配置與 webpack 的配置類(lèi)似，定義在 rollup.config.js 文件中，比如：

// rollup.config.js
export default {
  input: "src/index.js",
  output: {
    file: "bundle.js",
    // amd, cjs, esm, iife, umd, system
    format: "cjs"
  }
};

常用的幾個(gè)配置項(xiàng)：

input: 源碼入口文件，一般是一個(gè)文件，如 src/index.js。

output: 定義輸出，如文件名，目標(biāo)目錄，輸出模塊范式（es6, commonjs, amd, umd, iife 等），模塊導(dǎo)出名稱(chēng)，外部庫(kù)聲明，全局變量等。

plugins: 插件，比如 rollup-plugin-json 可以讓 rollup 從 .json 文件中導(dǎo)入 json 數(shù)據(jù)。

更多詳細(xì)的配置，參考 rollup.js - configuration-files.

3. rollup 與 webpack 對(duì)比

先拿段代碼來(lái)來(lái)看看他們打包之后各自是什么效果。

源代碼

# 目錄
|-- src/
    |-- index.js
    |-- prefix.js
    |-- suffix.js

    
# prefix.js
const prefix = "prefix";

export default str => `${prefix} | ${str}`;
    
    
# suffix.js
const suffix = "suffix";

export default str => `${str} | ${suffix}`;


# index.js
import prefix from "./prefix";
import suffix from "./suffix";

export default str => suffix(prefix(str));

配置

# webpack.config.js
module.exports = {
  entry: "./src/index.js",
  output: {
    filename: "dist/webpack.bundle.js",
    library: "demo",
    libraryTarget: "umd"
  }
};


# rollup.config.js
export default {
  input: "src/index.js",
  output: {
    file: "dist/rollup.bundle.js",
    name: "demo",
    format: "umd"
  }
};

運(yùn)行

# webpack 打包
webpack


# rollup 打包
rollup -c

webpack.bundle.js

(function webpackUniversalModuleDefinition(root, factory) {
    if(typeof exports === "object" && typeof module === "object")
        module.exports = factory();
    else if(typeof define === "function" && define.amd)
        define([], factory);
    else if(typeof exports === "object")
        exports["demo"] = factory();
    else
        root["demo"] = factory();
})(typeof self !== "undefined" ? self : this, function() {
return /******/ (function(modules) { // webpackBootstrap
/******/     // The module cache
/******/     var installedModules = {};
/******/
/******/     // The require function
/******/     function __webpack_require__(moduleId) {
/******/
/******/         // Check if module is in cache
/******/         if(installedModules[moduleId]) {
/******/             return installedModules[moduleId].exports;
/******/         }
/******/         // Create a new module (and put it into the cache)
/******/         var module = installedModules[moduleId] = {
/******/             i: moduleId,
/******/             l: false,
/******/             exports: {}
/******/         };
/******/
/******/         // Execute the module function
/******/         modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
/******/
/******/         // Flag the module as loaded
/******/         module.l = true;
/******/
/******/         // Return the exports of the module
/******/         return module.exports;
/******/     }
/******/
/******/
/******/     // expose the modules object (__webpack_modules__)
/******/     __webpack_require__.m = modules;
/******/
/******/     // expose the module cache
/******/     __webpack_require__.c = installedModules;
/******/
/******/     // define getter function for harmony exports
/******/     __webpack_require__.d = function(exports, name, getter) {
/******/         if(!__webpack_require__.o(exports, name)) {
/******/             Object.defineProperty(exports, name, {
/******/                 configurable: false,
/******/                 enumerable: true,
/******/                 get: getter
/******/             });
/******/         }
/******/     };
/******/
/******/     // getDefaultExport function for compatibility with non-harmony modules
/******/     __webpack_require__.n = function(module) {
/******/         var getter = module && module.__esModule ?
/******/             function getDefault() { return module["default"]; } :
/******/             function getModuleExports() { return module; };
/******/         __webpack_require__.d(getter, "a", getter);
/******/         return getter;
/******/     };
/******/
/******/     // Object.prototype.hasOwnProperty.call
/******/     __webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); };
/******/
/******/     // __webpack_public_path__
/******/     __webpack_require__.p = "";
/******/
/******/     // Load entry module and return exports
/******/     return __webpack_require__(__webpack_require__.s = 0);
/******/ })
/************************************************************************/
/******/ ([
/* 0 */
/***/ (function(module, __webpack_exports__, __webpack_require__) {

"use strict";
Object.defineProperty(__webpack_exports__, "__esModule", { value: true });
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__prefix__ = __webpack_require__(1);
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_1__suffix__ = __webpack_require__(2);



/* harmony default export */ __webpack_exports__["default"] = (str => Object(__WEBPACK_IMPORTED_MODULE_1__suffix__["a" /* default */])(Object(__WEBPACK_IMPORTED_MODULE_0__prefix__["a" /* default */])(str)));


/***/ }),
/* 1 */
/***/ (function(module, __webpack_exports__, __webpack_require__) {

"use strict";
const prefix = "prefix";

/* harmony default export */ __webpack_exports__["a"] = (str => `${prefix} | ${str}`);


/***/ }),
/* 2 */
/***/ (function(module, __webpack_exports__, __webpack_require__) {

"use strict";
const suffix = "suffix";

/* harmony default export */ __webpack_exports__["a"] = (str => `${str} | ${suffix}`);


/***/ })
/******/ ]);
});

rollup.bundle.js

(function (global, factory) {
    typeof exports === "object" && typeof module !== "undefined" ? module.exports = factory() :
    typeof define === "function" && define.amd ? define(factory) :
    (global.demo = factory());
}(this, (function () { "use strict";

    const prefix = "prefix";

    var prefix$1 = str => `${prefix} | ${str}`;

    const suffix = "suffix";

    var suffix$1 = str => `${str} | ${suffix}`;

    var index = str => suffix$1(prefix$1(str));

    return index;

})));

其實(shí)，你也基本上看出來(lái)了，在這種場(chǎng)景下，rollup 的優(yōu)勢(shì)在哪里：

文件很小，幾乎沒(méi)什么多余代碼，除了必要的 cjs, umd 頭外，bundle 代碼基本和源碼差不多，也沒(méi)有奇怪的 __webpack_require__, Object.defineProperty 之類(lèi)的東西；

執(zhí)行很快，因?yàn)闆](méi)有 webpack bundle 中的 __webpack_require__, Object.defineProperty 之類(lèi)的冗余代碼；

另外，rollup 也對(duì) es 模塊輸出及 iife 格式打包有很好的支持。

4. 結(jié)論

rollup 相對(duì) webpack 而言，要小巧、干凈利落一些，但不具備 webpack 的一些強(qiáng)大的功能，如熱更新，代碼分割，公共依賴(lài)提取等。

所以，一個(gè)不錯(cuò)的選擇是，應(yīng)用使用 webpack，類(lèi)庫(kù)使用 rollup。

5. 后續(xù)

更多博客，查看 https://github.com/senntyou/blogs

作者：深予之 (@senntyou)

版權(quán)聲明：自由轉(zhuǎn)載-非商用-非衍生-保持署名（創(chuàng)意共享3.0許可證）

云服務(wù)器 GPU云服務(wù)器 ROLLUP 之外 rollups.js 出阿里云之外還有什么服務(wù)器

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://specialneedsforspecialkids.com/yun/96999.html

發(fā)表評(píng)論

登陸后可評(píng)論

0條評(píng)論

stefan

男|高級(jí)講師

我要關(guān)注我要私信

TA的文章

#yyds干貨盤(pán)點(diǎn)#vspherer快照導(dǎo)致磁盤(pán)文件丟失，通過(guò)快照文件恢復(fù)

閱讀 1833·2021-11-25 09:43
開(kāi)課吧Python全棧工程師培養(yǎng)計(jì)劃

閱讀 1335·2021-11-22 15:08
Windows環(huán)境下使用Python設(shè)計(jì)應(yīng)用軟件——【6】pyqt通過(guò)勾選框選擇對(duì)TableWidg

閱讀 3735·2021-11-22 09:34
進(jìn)入阿里做測(cè)試員遙不可及？這里或許有你想要的答案

閱讀 3225·2021-09-04 16:40
深度學(xué)習(xí)、機(jī)器學(xué)習(xí)畢業(yè)設(shè)計(jì) - 選題建議

閱讀 3002·2021-09-04 16:40
【學(xué)習(xí)筆記】CSS深入理解之margin

閱讀 542·2019-08-30 15:54
WebSocket網(wǎng)絡(luò)通信協(xié)議

閱讀 1335·2019-08-29 17:19
純CSS實(shí)現(xiàn)頁(yè)簽切換效果

閱讀 1752·2019-08-28 18:13

国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專(zhuān)欄INFORMATION COLUMN

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來(lái)選購(gòu)！

前端進(jìn)階（6） - webpack 之外的另一種選擇：rollup

相關(guān)文章

**前端進(jìn)階（10） - webpack 之外的另一種選擇：parcel**

**前端進(jìn)階（14） - 如何提升前端性能和響應(yīng)速度**

**前端進(jìn)階（14） - 如何提升前端性能和響應(yīng)速度**

**前端進(jìn)階（9） - js 性能優(yōu)化利器：prepack**

從 1 到完美，寫(xiě)一個(gè) js 庫(kù)、node 庫(kù)、前端組件庫(kù)

發(fā)表評(píng)論

0條評(píng)論

stefan

男|高級(jí)講師

TA的文章

#yyds干貨盤(pán)點(diǎn)#vspherer快照導(dǎo)致磁盤(pán)文件丟失，通過(guò)快照文件恢復(fù)

開(kāi)課吧Python全棧工程師培養(yǎng)計(jì)劃

Windows環(huán)境下使用Python設(shè)計(jì)應(yīng)用軟件——【6】pyqt通過(guò)勾選框選擇對(duì)TableWidg

進(jìn)入阿里做測(cè)試員遙不可及？這里或許有你想要的答案

深度學(xué)習(xí)、機(jī)器學(xué)習(xí)畢業(yè)設(shè)計(jì) - 選題建議

【學(xué)習(xí)筆記】CSS深入理解之margin

WebSocket網(wǎng)絡(luò)通信協(xié)議

純CSS實(shí)現(xiàn)頁(yè)簽切換效果

最新活動(dòng)