写点什么

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

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

关注

评论 1 条评论

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

架构实战营 - 模块三作业

Sun

私域流量这件事,古代就有了……

白洞计划

看了小姐姐的Spring SPI 总结,双非渣硕的我差点跳起来,被征服了

牛哄哄的java大师

Java

架构实战营 -- 模块三

永佳

架构实战营

基于OpenPAI细化部署 Hadoop 集群

Damon

hadoop 5月日更

Nginx 常用配置清单

Java小咖秀

nginx Web 反向代理 HTTP

太好用了!斩获3个大厂Offer后,才发现学霸给的JVM笔记有多强大

飞飞JAva

Java

程序员应如何打破平庸,杜绝淘汰,避免内卷!【强烈建议收藏!】

程序员 ios开发

惊呆了!阿里自爆2021年度九大Java技术合集,Github上已获赞98.3K

Java架构师迁哥

新书见面 | 《云原生时代的微服务架构实践》

Damon

微服务 云原生 5月日更

第一个鸿蒙应用

释缘

鸿蒙 HarmonyOS

「技术人生」专题第1篇:什么是技术一号位?

阿里巴巴中间件

技术 程序人生 方法论 思维

基于 MySQL 的消息队列系统架构设计文档

小遵

存储优化补充篇:Explain索引优化实操

Coder的技术之路

高并发 高并发系统设计 项目实战 数据库调优 索引优化

内卷

Jxin

中国式美好假期:用AI地图,抢先体验未来出行

脑极体

想提升查询性能?openLooKeng新下推框架助您一臂之力

LooK

辞旧迎新岁岁新

Thomas

matlab

如何做好用户画像?

石云升

创业 用户模型 5月日更

求求你别再用 MySQL offset 和 limit 分页了

xcbeyond

MySQL 5月日更

架构实战营模块三作业

竹林七贤

AI英雄出少年!奔赴星辰,他们正在创造黄金时代

百度大脑

AI

技术探索系列 - 轻松带你掌握JMM(2)

码界西柚

JVM JMM 5月日更

【得物技术】软件工程与PlantUML实战

得物技术

软件工程 UML PlantUML 实战 得物技术

PHP文件包含小总结

Thrash

安全

数据架构:数据冷热分离实践思考

程序员架构进阶

数据架构 架构设计 28天写作 5月日更 冷热分离

华仔架构训练营作业(模块三)

不听不听王八念晶

网络攻防学习笔记 Day7

穿过生命散发芬芳

5月日更 网络攻防

分解的三要素,从经典中感悟

顿晓

5月日更 分解

Nginx-代理服务器

进击的梦清

nginx Docker Linux Docker-compose 代理

模块1作业

圆心角

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