写点什么

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

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

关注

评论 1 条评论

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

海量接入、毫秒响应:易易互联携手阿里云构筑高可用物联网消息中枢

阿里巴巴云原生

阿里云 RocketMQ 云原生

AI Compass前沿速览:IndexTTS2–B站、HuMo、Stand-In视觉生成框架、Youtu-GraphRAG、MobileLLM-R1–Meta、PP-OCRv5

汀丶人工智能

华为开发者空间:递归排序教学,搭建学生成绩管理系统

华为云开发者联盟

C++ 华为开发者空间

哪些AI工具可以生成PPT?9款好用的PPT生成软件盘点

职场工具箱

人工智能 PPT AIGC AI工具 AI生成PPT

黑客劫持:周下载量超20+亿的NPM包被攻击

掘金安东尼

第二届航空航天、机械与材料工程国际学术会议 (AMME 2025)

搞科研的小刘

航空航天 国际学术会议 材料与机械

追踪定位 Java 进程的 Socket 创建

mazhen

Java Linux profiler ebpf crac

CST软件如何用远场探针验证RCS探针结果

思茂信息

cst CST软件 CST Studio Suite

华为开发者空间:Java 项目 Docker 容器化,云主机实操教程

华为云开发者联盟

Docker 华为开发者空间

AV-Comparatives获得Euregio提名

财见

构建“超级用户共创网络”:一种实时、结构化吸纳用户洞察的机制

lsycang

第七届地球科学与遥感测绘国际学术会议(GRSM 2025)

搞科研的小刘

学术会议 遥感技术 乌鲁木齐

领百万Token福利!华为开发者空间 Versatile Agent自定义接入华为云MaaS全指导

华为云开发者联盟

MaaS 华为开发者空间 Versatile Agent.

绕过亚马逊儿童版家长控制的技术漏洞分析

qife122

网络安全 家长控制

flyway报错Correct the classpath of your application so that it contains compatible versions of the

刘大猫

人工智能 机器学习 算法 数据分析 大模型

活动报名:Voice First!Demo Day@Voice Agent Camp,9.22,上海丨超音速计划 2025

RTE开发者社区

数据分析与AI丨PLC 开发效率革命:AI 多智能体加速 ST 语言开发

Altair RapidMiner

人工智能 AI 数据分析 制造业 RapidMiner

开发者空间云开发环境+Versatile Agent,轻松构建AI轻量级智能办公助手

华为云开发者联盟

云原生集成开发环境 华为开发者空间 Versatile Agent.

互动LED地砖屏:沉浸式娱乐

Dylan

LED LED display 零售电商市场 舞台表演 LED屏幕

大数据-98 Spark 从 DStream 到 Structured Streaming:Spark 实时计算的演进

武子康

Java 大数据 flink spark 分布式

使用 NVIDIA Dynamo 部署 PD 分离推理服务

Se7en

元图 CAD 看图:OCR 识别,让离散文字 “活” 起来

元图CAD

OCR识别 图像识别cad 文字替换 PDF转CAD

鲲鹏 DevKit 实战!华为开发者空间演示 C/C++ 源码迁移

华为云开发者联盟

鲲鹏 DevKit 华为开发者空间

鲲鹏 DevKit 实战!华为开发者空间体验MPI 应用并行调试与编译

华为云开发者联盟

鲲鹏 DevKit 华为开发者空间

让中国企业飞向世界,金山办公+华为联手造了“AI协同直升机”

脑极体

AI

东软@IAA MOBILITY:开放协作,共绘智慧出行未来图景

先锋IT

头秃!特斯拉Model Y定金都交了,媳妇非让我换15万的铂智3X,谁来救我出纠结坑?

王中阳Go

特斯拉 买车推荐 铂智

如何实现“倾听智能体”:从理念到功能

lsycang

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