在 2025 收官前,看清 Data + AI 的真实走向,点击查看 BUILD 大会精华版 了解详情
写点什么

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:265166
用户头像

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

关注

评论 1 条评论

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

Python从零到壹丨图像增强及运算:图像掩膜直方图和HS直方图

华为云开发者联盟

Python 人工智能 华为云 企业号 1 月 PK 榜

软件测试/测试开发 | app自动化测试(Android)--App 控件定位

测试人

软件测试 自动化测试 测试开发 appium

年度技术盘点:水稻、韦伯、脑机接口、AI预测及创作、快速充电

B Impact

老马闲评数字化【3】业务说了算还是技术说了算?

行云创新

云原生 数字化转型 企业数字化 老马闲评数字化 行云创新

模块五计算架构模式

程序员小张

「架构实战营」

网易游戏实时 HTAP 计费风控平台建设

Apache Flink

大数据 flink 实时计算

老马闲评数字化【2】您的企业是否应该急于数字化转型?

行云创新

云原生 数字化转型 企业数字化 老马闲评数字化 行云创新

带你熟悉3种AQS的线程并发工具的用法

华为云开发者联盟

后端 开发 华为云 企业号 1 月 PK 榜 华为云开发者联盟

2022年中国跨境支付行业年度专题分析

易观分析

金融 跨境支付 市场

移动开发平台真的能提升App开发效率吗?

Onegun

移动应用开发 移动端开发

推荐几款实用的移动开发平台

FinFish

移动开发 开发平台 移动开发平台 移动端开发 小程序技术

C4D和3dmax有什么区别?

Finovy Cloud

3DMAX C4D

老马闲评数字化【1】数字化转型,不转得死,转了也未必活?

行云创新

云原生 数字化转型 企业数字化

软件测试/测试开发 | app自动化测试(Android)--元素定位方式与隐式等待

测试人

软件测试 自动化测试 测试开发 appium

混合式APP开发框架

力软低代码开发平台

国家先进计算产业创新(宜昌)中心来了!

SENSORO

人工智能 大数据

如何通过Java代码向Word文档添加文档属性

在下毛毛雨

Java word文档 属性 文档属性

如何集中式管理多个客户端节点传输任务-镭速

镭速

太狠了,Spring全家桶笔记,一站式通关全攻略,已入职某厂涨薪18K

程序知音

Java spring ssm java架构 后端技术

2022评分最高十大信创解决方案出炉!

饿鱼

Domino的数据迁移方案

饿鱼

由浅入深,聊聊 LeackCanary 的那些事

Petterp

android 内存泄漏 LeakCanary

尚硅谷Spring6发布视频教程

小谷哥

Github霸榜!竟是阿里技术官的微服务分布式项目实战笔记总结

程序知音

Java 分布式 微服务 java架构 后端技术

行云洞见|为什么说云端IDE代表未来趋势?

行云创新

程序员 云原生 CloudIDE 集成开发环境 云端IDE

软件测试/测试开发 | app自动化测试(Android)--高级定位技巧

测试人

软件测试 自动化测试 测试开发 appium

阿里、腾讯、蚂蚁金服Java技术面试及经验总结(文末分享答案)

程序知音

Java java面试 后端技术 春招 八股文

一种前端无源码定制化开发能力专利解读

元年技术洞察

低代码 数字化转型 无源码 元年方舟

各大互联网公司面经分享:Java全栈知识+1500道大厂面试真题

程序知音

Java java面试 java架构 大厂面试题 八股文

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