50万奖金+官方证书,深圳国际金融科技大赛正式启动,点击报名 了解详情
写点什么

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

  • 2019-04-12
  • 本文字数:1096 字

    阅读完需:约 4 分钟

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

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


2019-04-12 09:265110
用户头像

发布了 731 篇内容, 共 480.3 次阅读, 收获喜欢 2008 次。

关注

评论 1 条评论

发布
用户头像
Rollup可以替代webpack在生产环境中吗?
2019-04-12 15:43
回复
没有更多了
发现更多内容

O'Reilly出版社又一经典之作——Python设计模式

计算机与AI

Python

Dubbo-go Client端调用服务过程

apache/dubbo-go

dubbo dubbo-go dubbogo

微信视频号强制置顶朋友圈:盈利不可牺牲用户体验

石头IT视角

这份笔记我必啃完!美团T9首发内部JVM高级特性笔记,差距不止一点点

Java架构追梦

Java 源码 架构 面试 JVM

低代码开发平台核心功能设计——组件自定义交互实现

徐小夕

大前端 编辑器 H5 大屏可视化 lowcode

2 w字长文带你深入理解线程池

Java架构师迁哥

Spring bean 加载顺序导致的 bug 问题

AI乔治

Java 架构 Spring Boot

Rethink:多版本文件的命名细节

小匚

团队 随笔杂谈

Reactor中的Thread和Scheduler

程序那些事

响应式编程 reactor 多线程 程序那些事 reactivex

实时指挥调度的发展和优势

anyRTC开发者

ios android 音视频 WebRTC RTC

Pulsar Summit Asia 2020 | 主题演讲:大咖呈现,紧扣社区

Apache Pulsar

大数据 开源

双11购物节国外剁手党同狂欢 阿里云视频云电商直播实时字幕

阿里云CloudImagine

云直播 直播 直播带货 语音识别

如何预防工业物联网中的恶意攻击?

VoltDB

大数据 数据分析 5G 工业互联网

数据结构与算法系列之递归(GO)

书旅

数据结构与算法 Go 语言

架构师训练营第 1 期第 8 周学习总结

好吃不贵

极客大学架构师训练营

靠脑机接口“隔空探物”,大脑植入芯片可实现“心灵感应”

脑极体

2020双11:每秒58.3万笔!阿里云又扛住了!

云计算 互联网 运维 云原生 科技

如何应对大促流量洪峰?揭秘京东技术人的备战手册

京东科技开发者

云计算 大数据 亿级流量

HTTPDNS开源 Android SDK,赋能更多开发者参与共建

移动研发平台EMAS

android 阿里云 开源 httpdns 移动研发平台

接口文档生成详细教程

测试人生路

接口文档

当人脸识别对准执法者,AI的应用边界博弈

脑极体

代码简易调试方法.md

Albert

Java LeetCode 调试

祝贺 StreamNative 团队成员 Jennifer 当选 Apache Pulsar PMC 成员

Apache Pulsar

大数据 开源 Apache Pulsar

甲方日常 47

句子

工作 随笔杂谈 日常

一个技术总监的忠告:精通那么多技术,你为何还是受不到重用?

四猿外

程序人生 技术管理 加薪 职场成长 源码阅读

架构师训练营第八周

我是谁

极客大学架构师训练营

当我们在讨论实时性的时候,我们在讨论什么?

VoltDB

数据分析 5G 工业互联网

文科妹子都会用 GitHub,你这个工科生还等什么

沉默王二

GitHub

记不住Spring中Scheduled中的Cron语法?让我们看看源码吧

AI乔治

Java spring 编程 架构

甲方日常 48

句子

工作 随笔杂谈 日常

什么?美团T9首发内部JVM高级特性笔记,看完差距不止一点

小Q

Java 学习 程序员 架构 面试

Rollup 1.0发布,支持对捆绑包进行代码拆分_编程语言_Bruno Couriol_InfoQ精选文章