其他打包器✅

rollup 为什么快

1. esm 静态分析，优于 commonjs 动态分析

rollup 内联优化是什么？

答案

内联优化 是指将模块的代码直接插入到引用它的地方。这种优化可以减少模块的加载时间，提高代码的执行效率。

例如 react 中如下代码 const nextRootContext = getRootHostContext(nextRootInstance); 在打包后会注入 getRootHostContext(nextRootInstance), var nextRootContext = nextRootInstance.nodeType rollup 会在编译的时候识别全局只调用一次的函数，编译的时候直接内联到调用的地方，避免采用引用方式调用的开销

打包前

function pushHostContainer(fiber: Fiber, nextRootInstance: Container): void {
  // Push current root instance onto the stack;
  // This allows us to reset root when portals are popped.
  push(rootInstanceStackCursor, nextRootInstance, fiber);
  // Track the context and the Fiber that provided it.
  // This enables us to pop only Fibers that provide unique contexts.
  push(contextFiberStackCursor, fiber, fiber);

  // Finally, we need to push the host context to the stack.
  // However, we can't just call getRootHostContext() and push it because
  // we'd have a different number of entries on the stack depending on
  // whether getRootHostContext() throws somewhere in renderer code or not.
  // So we push an empty value first. This lets us safely unwind on errors.
  push(contextStackCursor, null, fiber);
  const nextRootContext = getRootHostContext(nextRootInstance);
  // Now that we know this function doesn't throw, replace it.
  pop(contextStackCursor, fiber);
  push(contextStackCursor, nextRootContext, fiber);
}

打包后

function pushHostContainer (fiber, nextRootInstance) {
  push(rootInstanceStackCursor, nextRootInstance, fiber)
  push(contextFiberStackCursor, fiber, fiber)
  push(contextStackCursor, null, fiber)
  let nextRootContext = nextRootInstance.nodeType
  switch (nextRootContext) {
    case 9:
    case 11:
      nextRootContext = nextRootContext === 9 ? '#document' : '#fragment'
      nextRootInstance = (nextRootInstance =
            nextRootInstance.documentElement)
        ? (nextRootInstance = nextRootInstance.namespaceURI)
            ? getOwnHostContext(nextRootInstance)
            : HostContextNamespaceNone
        : HostContextNamespaceNone
      break
    default:
      if (
        ((nextRootInstance =
              nextRootContext === 8
                ? nextRootInstance.parentNode
                : nextRootInstance),
        (nextRootContext = nextRootInstance.tagName),
        (nextRootInstance = nextRootInstance.namespaceURI))
      ) {
        (nextRootInstance = getOwnHostContext(nextRootInstance)),
        (nextRootInstance = getChildHostContextProd(
          nextRootInstance,
          nextRootContext
        ))
      } else {
        switch (nextRootContext) {
          case 'svg':
            nextRootInstance = HostContextNamespaceSvg
            break
          case 'math':
            nextRootInstance = HostContextNamespaceMath
            break
          default:
            nextRootInstance = HostContextNamespaceNone
        }
      }
  }
  nextRootContext = nextRootContext.toLowerCase()
  nextRootContext = updatedAncestorInfoDev(null, nextRootContext)
  nextRootContext = {
    context: nextRootInstance,
    ancestorInfo: nextRootContext
  }
  pop(contextStackCursor, fiber)
  push(contextStackCursor, nextRootContext, fiber)
}

延伸阅读

• Compiler inlining optimizations 讨论哪些场景会触发内联优化