Rollup 1.0发布,支持对捆绑包进行代码拆分(28)

发布于2019-04-20 11:26:52

Rollup最近发布了它的第一个主要迭代版本。开发者可以使用Rollup 1.0对他们的库进行代码拆分,并暴露多个导入目标。

Rollup 1.0发布公告给出了一个假想的库的例子,它有四个入口点,对应于每个导出的库函数:

Rollup 1.0将8个模块减少到5个块,每个入口模块对应一个块,还有一个被其他几个块导入的块。每个块本身就是标准的ES模块,它们使用浏览器的内置模块加载器进行加载,没有任何额外的运行时开销,同时还可以利用Rollup的摇树优化功能。

对应的Rollup配置由一个rollup.config.js文件组成,文件内容如下:

export default 
    {
        input: {
            index: 'src/main.js',
            upper: 'src/upper.js',
            lower: 'src/lower.js',
            upperFirst: 'src/upperFirst.js'
        },
        output: [
            {
                dir: 'esm',
                format: 'esm'
            },
            {
                dir: 'cjs',
                format: 'cjs'
            }
        ]
    }

入口点通过input属性来指定,输出目录通过output属性来指定。然后在package.json文件中引用目录:

{
  "name": "fancy-case",
  "version": "1.0.0",
  "main": "cjs/index.js",
  "module": "esm/index.js",
  "scripts": {
    "prepare": "rollup --config"
  },
  "files": [
    "cjs/*",
    "esm/*"
  ],
  "devDependencies": {
    "rollup": "^1.0.0"
  }
}

代码拆分可以将代码基库拆分成更小的块,这些块可以按需加载。将这项技术应用于整个Web应用程序上时,用户可以更快地获得可交互的页面,而不必等待完整的包被执行。将这项技术应用于库上时,用户可以从单独的文件导入库的独立部分。例如,使用import merge from ‘lodash-es/merge’来导入merge函数。用户还可以使用以下命令从lodash中导入任意数量的函数:

import { partition, memoize } from ‘lodash-es’;

Rollup的主要贡献者Lukas Taegert指出,“当然,你也可以使用Rollup来捆绑Web应用程序(通过动态导入进行代码拆分)”。Rollup的文档中提供了一个额外的示例。

Rollup在2016年率先使用摇树来优化应用程序包。Rollup的目标是为JavaScript库生成“看起来是由人类编写的最高效的包”。代码拆分是在Rollup 0.55中引入的。后来,经过了一些bug修复和改进,被包含在Rollup 1.0中。

Webpack始于2012年,目标是构建复杂的单页应用程序(SPA)。为此,Webpack引入了代码拆分和静态资产捆绑功能。Webpack在它的第二个主要迭代版本中引入了基本的摇树优化功能。

查看英文原文https://www.infoq.com/news/2019/03/rollup-code-splitting