rollup一次性全面了解！

yjw_surCode
163 阅读2分钟

什么是 Rollup：

简单而言, Rollup 是一个模块打包工具, 可以将我们按照 ESM (ES2015 Module) 规范编写的源码构建输出如下格式:

  • IIFE: 自执行函数, 可通过 <script> 标签加载
  • AMD: 浏览器端的模块规范, 可通过 RequireJS 可加载
  • CommonJS: Node 默认的模块规范, 可通过 Webpack 加载
  • UMD: 兼容 IIFE, AMD, CJS 三种模块规范
  • ESM: ES2015 Module 规范, 可用 Webpack, Rollup 加载

大多数的 Library 也是选择使用 Rollup 构建, 比如: React, Vue, Angular, D3, Moment, Redux pinia…

缺点:

  • 1:不支持代码拆分(Code Splitting)

webpack的Code Splitting： main.js被拆成了lodash.js和main.js,各自有各自的大小。比如之前一共是2Mb，优化后是1mb+1mb，这样我们在访问页面的时候就不用一次加载2mb的内容了，而是分别加载1mb的内容，实践发现，同事加载两个1mb资源，要比一次加载2mb的资源，要快一点。

  • 2:不支持运行时态加载特性(dynamic imports at runtime)

  • 2.1:import().then() 函数是ES6的一个提案，专门用于动态加载模块的

  • 2.2可以引申出一个问题：webpack动态import原理是什么???
    explain:先打包成一个自执行函数 然后import经过webpack打包以后变成一些Map对象，key为模块路径，value为模块的可执行函数；
    其中的异步方法（import('xxModule')）比较特殊一些，它会单独打成一个包，采用动态加载的方式，具体过程：当用户触发其加载的动作时，会动态的在head标签中创建一个script标签，然后发送一个http请求，加载模块，模块加载完成以后自动执行其中的代码

    webpack 打包生成的源码：
if (void 0 !== a)
        for (
          var u = document.getElementsByTagName("script"), p = 0;
          p < u.length;
          p++
        ) {
          var s = u[p];
          if (
            s.getAttribute("src") == t ||
            s.getAttribute("data-webpack") == r + a
          ) {
            l = s;
            break;
          }
        }
      l ||
        ((c = !0),
        ((l = document.createElement("script")).charset = "utf-8"),
        (l.timeout = 120),
        n.nc && l.setAttribute("nonce", n.nc),
        l.setAttribute("data-webpack", r + a),
        (l.src = t)),
        (e[t] = [o]);
      var d = (r, o) => {
          (l.onerror = l.onload = null), clearTimeout(f);
          var n = e[t];
          if (
            (delete e[t],
            l.parentNode && l.parentNode.removeChild(l),
            n && n.forEach((e) => e(o)),
            r)
          )
            return r(o);
        },
        f = setTimeout(
          d.bind(null, void 0, { type: "timeout", target: l }),
          12e4
        );
      (l.onerror = d.bind(null, l.onerror)),
        (l.onload = d.bind(null, l.onload)),
        c && document.head.appendChild(l);
    }

  • 3：打包css相对webpack较差

  • 4：模块最终都会被打包到一个函数中，无法实现HMR

优点:
1:: webpack他有各种loader，帮助我们解决各种问题，这针对于开发项目是很有效的，但是他生成代码有很多不是我们所写的逻辑代码, 如一些他自有的模块加载功能 就使得打包出来的非常的复杂,繁琐。比如：__webpack__ helpers , __webpack__ require

2:: Tree Shaking：自动移除未使用的代码，输出更小的文件。

借助react-redux库理解rollup! (pinia打包工具也是rollup,pinia目前已经是vue官方正式的状态库)

react-redux ：github1s.com/reduxjs/rea…

image.png

pinia

DEMO演示测试地址:stackblitz.com/github/pini…

创建自己的库(ts-depot)

(源代码有注释)

创建自己的rollup插件（rollup-plugin-removeConsole）（github.com/yjwSurCode/…

Technical-points:lerna包管理 rollup插件 rollup打包库 Additional：后期可以开发md插件

avatar
文章
阅读
粉丝