资讯专栏INFORMATION COLUMN

上云采购季！| 2核2G4M爆款云服务器低至59元/年，更有多台、长期优惠，快来选购！

立即前往
首页/文章专栏/前端进阶（6） - webpack 之外的另一种选择：rollup

前端进阶（6） - webpack 之外的另一种选择：rollup

stefan / 593人阅读

摘要：之外的另一种选择对前端来说是再熟悉不过的工具了，它提供了强大的功能来构建前端的资源，包括等语言脚本，也包括等二进制文件。所以，一个不错的选择是，应用使用，类库使用。

webpack 之外的另一种选择：rollup

webpack 对前端来说是再熟悉不过的工具了，它提供了强大的功能来构建前端的资源，包括 html/js/ts/css/less/scss ... 等语言脚本，也包括 images/fonts ... 等二进制文件。

其实，webpack 发起之初主要是为了解决以下两个问题：

代码拆分（Code Splitting）: 可以将应用程序分解成可管理的代码块，可以按需加载，这样用户便可快速与应用交互，而不必等到整个应用程序下载和解析完成才能使用，以此构建复杂的单页应用程序（SPA）；

静态资源（Static Assets）: 可以将所有的静态资源，如 js、css、图片、字体等，导入到应用程序中，然后由 webpack 使用 hash 重命名需要的资源文件，而无需为文件 URL 增添 hash 而使用 hack 脚本，并且一个资源还能依赖其他资源。

正是因为 webpack 拥有如此强大的功能，所以 webpack 在进行资源打包的时候，就会产生很多冗余的代码（如果你有查看过 webpack 的 bundle 文件，便会发现）。

比如，把 export default str => str; 这段代码用 webpack 打包就会得到下面的结果：

</>复制代码 
  1. /******/ (function(modules) { // webpackBootstrap
  2. /******/     // The module cache
  3. /******/     var installedModules = {};
  4. /******/
  5. /******/     // The require function
  6. /******/     function __webpack_require__(moduleId) {
  7. /******/
  8. /******/         // Check if module is in cache
  9. /******/         if(installedModules[moduleId]) {
  10. /******/             return installedModules[moduleId].exports;
  11. /******/         }
  12. /******/         // Create a new module (and put it into the cache)
  13. /******/         var module = installedModules[moduleId] = {
  14. /******/             i: moduleId,
  15. /******/             l: false,
  16. /******/             exports: {}
  17. /******/         };
  18. /******/
  19. /******/         // Execute the module function
  20. /******/         modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
  21. /******/
  22. /******/         // Flag the module as loaded
  23. /******/         module.l = true;
  24. /******/
  25. /******/         // Return the exports of the module
  26. /******/         return module.exports;
  27. /******/     }
  28. /******/
  29. /******/
  30. /******/     // expose the modules object (__webpack_modules__)
  31. /******/     __webpack_require__.m = modules;
  32. /******/
  33. /******/     // expose the module cache
  34. /******/     __webpack_require__.c = installedModules;
  35. /******/
  36. /******/     // define getter function for harmony exports
  37. /******/     __webpack_require__.d = function(exports, name, getter) {
  38. /******/         if(!__webpack_require__.o(exports, name)) {
  39. /******/             Object.defineProperty(exports, name, {
  40. /******/                 configurable: false,
  41. /******/                 enumerable: true,
  42. /******/                 get: getter
  43. /******/             });
  44. /******/         }
  45. /******/     };
  46. /******/
  47. /******/     // getDefaultExport function for compatibility with non-harmony modules
  48. /******/     __webpack_require__.n = function(module) {
  49. /******/         var getter = module && module.__esModule ?
  50. /******/             function getDefault() { return module["default"]; } :
  51. /******/             function getModuleExports() { return module; };
  52. /******/         __webpack_require__.d(getter, "a", getter);
  53. /******/         return getter;
  54. /******/     };
  55. /******/
  56. /******/     // Object.prototype.hasOwnProperty.call
  57. /******/     __webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); };
  58. /******/
  59. /******/     // __webpack_public_path__
  60. /******/     __webpack_require__.p = "";
  61. /******/
  62. /******/     // Load entry module and return exports
  63. /******/     return __webpack_require__(__webpack_require__.s = 0);
  64. /******/ })
  65. /************************************************************************/
  66. /******/ ([
  67. /* 0 */
  68. /***/ (function(module, __webpack_exports__, __webpack_require__) {
  69. "use strict";
  70. Object.defineProperty(__webpack_exports__, "__esModule", { value: true });
  71. /* harmony default export */ __webpack_exports__["default"] = (str => str);
  72. /***/ })
  73. /******/ ]);

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

需要 js 高效运行。因为 webpack 对子模块定义和运行时的依赖处理（__webpack_require__），不仅导致文件体积增大，还会大幅拉低性能；

项目（特别是类库）只有 js，而没有其他的静态资源文件，使用 webpack 就有点大才小用了，因为 webpack bundle 文件的体积略大，运行略慢，可读性略低。

在这种情况下，就想要寻求一种更好的解决方案，这便是 rollup.

现在已经有很多类库都在使用 rollup 进行打包了，比如：react, vue, preact, three.js, moment, d3 等。

1. 工具

安装

</>复制代码 
  1. npm i -g rollup          # 全局安装
  2. npm i -D rollup          # 本地安装

使用

</>复制代码 
  1. rollup -c                # 使用一个配置文件，进行打包操作

更多详细的用法，参考 rollup.js - command-line-flags.

2. 配置

rollup 的配置与 webpack 的配置类似，定义在 rollup.config.js 文件中，比如：

</>复制代码 
  1. // rollup.config.js
  2. export default {
  3.   input: "src/index.js",
  4.   output: {
  5.     file: "bundle.js",
  6.     // amd, cjs, esm, iife, umd, system
  7.     format: "cjs"
  8.   }
  9. };

常用的几个配置项：

input: 源码入口文件，一般是一个文件，如 src/index.js。

output: 定义输出，如文件名，目标目录，输出模块范式（es6, commonjs, amd, umd, iife 等），模块导出名称，外部库声明，全局变量等。

plugins: 插件，比如 rollup-plugin-json 可以让 rollup 从 .json 文件中导入 json 数据。

更多详细的配置，参考 rollup.js - configuration-files.

3. rollup 与 webpack 对比

先拿段代码来来看看他们打包之后各自是什么效果。

源代码

</>复制代码 
  1. # 目录
  2. |-- src/
  3.     |-- index.js
  4.     |-- prefix.js
  5.     |-- suffix.js
  6.     
  7. # prefix.js
  8. const prefix = "prefix";
  9. export default str => `${prefix} | ${str}`;
  10.     
  11.     
  12. # suffix.js
  13. const suffix = "suffix";
  14. export default str => `${str} | ${suffix}`;
  15. # index.js
  16. import prefix from "./prefix";
  17. import suffix from "./suffix";
  18. export default str => suffix(prefix(str));

配置

</>复制代码 
  1. # webpack.config.js
  2. module.exports = {
  3.   entry: "./src/index.js",
  4.   output: {
  5.     filename: "dist/webpack.bundle.js",
  6.     library: "demo",
  7.     libraryTarget: "umd"
  8.   }
  9. };
  10. # rollup.config.js
  11. export default {
  12.   input: "src/index.js",
  13.   output: {
  14.     file: "dist/rollup.bundle.js",
  15.     name: "demo",
  16.     format: "umd"
  17.   }
  18. };

运行

</>复制代码 
  1. # webpack 打包
  2. webpack
  3. # rollup 打包
  4. rollup -c

webpack.bundle.js

</>复制代码 
  1. (function webpackUniversalModuleDefinition(root, factory) {
  2.     if(typeof exports === "object" && typeof module === "object")
  3.         module.exports = factory();
  4.     else if(typeof define === "function" && define.amd)
  5.         define([], factory);
  6.     else if(typeof exports === "object")
  7.         exports["demo"] = factory();
  8.     else
  9.         root["demo"] = factory();
  10. })(typeof self !== "undefined" ? self : this, function() {
  11. return /******/ (function(modules) { // webpackBootstrap
  12. /******/     // The module cache
  13. /******/     var installedModules = {};
  14. /******/
  15. /******/     // The require function
  16. /******/     function __webpack_require__(moduleId) {
  17. /******/
  18. /******/         // Check if module is in cache
  19. /******/         if(installedModules[moduleId]) {
  20. /******/             return installedModules[moduleId].exports;
  21. /******/         }
  22. /******/         // Create a new module (and put it into the cache)
  23. /******/         var module = installedModules[moduleId] = {
  24. /******/             i: moduleId,
  25. /******/             l: false,
  26. /******/             exports: {}
  27. /******/         };
  28. /******/
  29. /******/         // Execute the module function
  30. /******/         modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
  31. /******/
  32. /******/         // Flag the module as loaded
  33. /******/         module.l = true;
  34. /******/
  35. /******/         // Return the exports of the module
  36. /******/         return module.exports;
  37. /******/     }
  38. /******/
  39. /******/
  40. /******/     // expose the modules object (__webpack_modules__)
  41. /******/     __webpack_require__.m = modules;
  42. /******/
  43. /******/     // expose the module cache
  44. /******/     __webpack_require__.c = installedModules;
  45. /******/
  46. /******/     // define getter function for harmony exports
  47. /******/     __webpack_require__.d = function(exports, name, getter) {
  48. /******/         if(!__webpack_require__.o(exports, name)) {
  49. /******/             Object.defineProperty(exports, name, {
  50. /******/                 configurable: false,
  51. /******/                 enumerable: true,
  52. /******/                 get: getter
  53. /******/             });
  54. /******/         }
  55. /******/     };
  56. /******/
  57. /******/     // getDefaultExport function for compatibility with non-harmony modules
  58. /******/     __webpack_require__.n = function(module) {
  59. /******/         var getter = module && module.__esModule ?
  60. /******/             function getDefault() { return module["default"]; } :
  61. /******/             function getModuleExports() { return module; };
  62. /******/         __webpack_require__.d(getter, "a", getter);
  63. /******/         return getter;
  64. /******/     };
  65. /******/
  66. /******/     // Object.prototype.hasOwnProperty.call
  67. /******/     __webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); };
  68. /******/
  69. /******/     // __webpack_public_path__
  70. /******/     __webpack_require__.p = "";
  71. /******/
  72. /******/     // Load entry module and return exports
  73. /******/     return __webpack_require__(__webpack_require__.s = 0);
  74. /******/ })
  75. /************************************************************************/
  76. /******/ ([
  77. /* 0 */
  78. /***/ (function(module, __webpack_exports__, __webpack_require__) {
  79. "use strict";
  80. Object.defineProperty(__webpack_exports__, "__esModule", { value: true });
  81. /* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__prefix__ = __webpack_require__(1);
  82. /* harmony import */ var __WEBPACK_IMPORTED_MODULE_1__suffix__ = __webpack_require__(2);
  83. /* harmony default export */ __webpack_exports__["default"] = (str => Object(__WEBPACK_IMPORTED_MODULE_1__suffix__["a" /* default */])(Object(__WEBPACK_IMPORTED_MODULE_0__prefix__["a" /* default */])(str)));
  84. /***/ }),
  85. /* 1 */
  86. /***/ (function(module, __webpack_exports__, __webpack_require__) {
  87. "use strict";
  88. const prefix = "prefix";
  89. /* harmony default export */ __webpack_exports__["a"] = (str => `${prefix} | ${str}`);
  90. /***/ }),
  91. /* 2 */
  92. /***/ (function(module, __webpack_exports__, __webpack_require__) {
  93. "use strict";
  94. const suffix = "suffix";
  95. /* harmony default export */ __webpack_exports__["a"] = (str => `${str} | ${suffix}`);
  96. /***/ })
  97. /******/ ]);
  98. });

rollup.bundle.js

</>复制代码 
  1. (function (global, factory) {
  2.     typeof exports === "object" && typeof module !== "undefined" ? module.exports = factory() :
  3.     typeof define === "function" && define.amd ? define(factory) :
  4.     (global.demo = factory());
  5. }(this, (function () { "use strict";
  6.     const prefix = "prefix";
  7.     var prefix$1 = str => `${prefix} | ${str}`;
  8.     const suffix = "suffix";
  9.     var suffix$1 = str => `${str} | ${suffix}`;
  10.     var index = str => suffix$1(prefix$1(str));
  11.     return index;
  12. })));

其实，你也基本上看出来了，在这种场景下，rollup 的优势在哪里：

文件很小，几乎没什么多余代码，除了必要的 cjs, umd 头外，bundle 代码基本和源码差不多，也没有奇怪的 __webpack_require__, Object.defineProperty 之类的东西；

执行很快，因为没有 webpack bundle 中的 __webpack_require__, Object.defineProperty 之类的冗余代码；

另外，rollup 也对 es 模块输出及 iife 格式打包有很好的支持。

4. 结论

rollup 相对 webpack 而言，要小巧、干净利落一些，但不具备 webpack 的一些强大的功能，如热更新，代码分割，公共依赖提取等。

所以，一个不错的选择是，应用使用 webpack，类库使用 rollup。

5. 后续

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

作者：深予之 (@senntyou)

版权声明：自由转载-非商用-非衍生-保持署名（创意共享3.0许可证）

云服务器 GPU云服务器 ROLLUP 之外 rollups.js 出阿里云之外还有什么服务器

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/96999.html

相关文章

  • 前端进阶（10） - webpack 之外的另一种选择：parcel

    摘要：便提供了一个额外的选择，对于不喜欢配置的开发者尤其友好，因为没有配置文件，仅有的少量配置项也是从命令行输入。另外会自动识别安装在中的插件，然后导入，而无需手动配置。与相比，零配置是最大的特点与优势，但没有功能强大，也缺少了些灵活性。 webpack 之外的另一种选择：parcel 之前有写过一篇 webpack 之外的另一种选择：rollup，这次算是姊妹篇，介绍另外一个工具 parc...

    sutaking 评论0 收藏0

  • 前端进阶（14） - 如何提升前端性能和响应速度

    摘要：一般建议文件最大不超过。按需加载可以减小首屏加载文件的体积，达到提高响应速度的目的。如果你的项目不需要处理静态资源如图片，也不需要按需加载，并追求前端高性能的话，可以尝试。 如何提升前端性能和响应速度 下面大多是从前端工程化的角度给出的优化建议，如果需要了解语法上的优化，可以参考： 如何提高页面加载速度 编写高效的JavaScript Web前端性能优化进阶 - 完结篇 1. 原生...

    lylwyy2016 评论0 收藏0

  • 前端进阶（14） - 如何提升前端性能和响应速度

    摘要：一般建议文件最大不超过。按需加载可以减小首屏加载文件的体积，达到提高响应速度的目的。如果你的项目不需要处理静态资源如图片，也不需要按需加载，并追求前端高性能的话，可以尝试。 如何提升前端性能和响应速度 下面大多是从前端工程化的角度给出的优化建议，如果需要了解语法上的优化，可以参考： 如何提高页面加载速度 编写高效的JavaScript Web前端性能优化进阶 - 完结篇 1. 原生...

    Airy 评论0 收藏0

  • 前端进阶（9） - js 性能优化利器：prepack

    摘要：性能优化利器性能优化性能优化不外乎从三个角度入手开发者在编写程序时，尽量避免不必要的冗余代码，包括冗余的第三方库首先要避免不必要的冗余代码，包括不必要的闭包不必要的变量与函数声明不必要的模块分割等。 js 性能优化利器：prepack 1. js 性能优化 js 性能优化不外乎从三个角度入手： 1.1 开发者在编写程序时，尽量避免不必要的冗余代码，包括冗余的第三方库 首先要避免不必要的...

    JouyPub 评论0 收藏0

  • 从 1 到完美，写一个 js 库、node 库、前端组件库

    摘要：从到完美，写一个库库前端组件库之前讲了很多关于项目工程化前端架构前端构建等方面的技术，这次说说怎么写一个完美的第三方库。使用导出模块，就可以在使用这个库的项目中构建时使用功能。 从 1 到完美，写一个 js 库、node 库、前端组件库 之前讲了很多关于项目工程化、前端架构、前端构建等方面的技术，这次说说怎么写一个完美的第三方库。 1. 选择合适的规范来写代码 js 模块化的发展大致有...

    rollback 评论0 收藏0

发表评论

登陆后可评论

0条评论

stefan

男|高级讲师
我要私信

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<