写点什么

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

2019 年 4 月 12 日

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 年 4 月 12 日 09:263943
用户头像

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

关注

评论 1 条评论

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

大厂动态规划面试汇总,教你如何修炼内功

Kevin

算法 动态规划 数据结构和算法 笔试

左手画条龙右手画彩虹——认知负荷理论

Justin

心理学 28天写作 游戏设计

Mac 下配置 Intellij IDEA + Tomcat 出现权限问题的解决办法

少平

tomcat

“蚂蚁牙黑”太火,想玩就用ModelArts做一个

华为云开发者社区

AI 动画 modelarts 图像

这个新春,你的云端安全守卫来咯 | 新服务上线

亚马逊AWS官方博客

【管理笔记16】行销市场区隔化与目标市场

俊毅

第五次作业

Geek_79e938

小心你的个人信息——GitHub 热点速览 v.21.09

HelloGitHub

GitHub 终端工具 开源项目 社交

关于搜商的一点记录「Day 9」

道伟

28天写作

FindBugs:Java 静态代码检查

少平

代码审查

Elasticsearch Search Options 搜索参数

escray

elastic 28天写作 死磕Elasticsearch 60天通过Elastic认证考试 三月日更

阿里巴巴Druid,轻松实现MySQL数据库加密!

王磊

Java springboot Druid

工作日志3-1

一锅水端平

敏捷, 是一种信仰

boshi

敏捷 日更挑战 28天写作

dubbo 源码 v2.7 分析:核心机制(一)

程序员架构进阶

架构 源码分析 dubbo 日更挑战 28天写作

一篇读懂https的本质、证书验证过程以及数据加密

梁龙先森

前端 https 前端进阶

产品经理训练营作业 04

KingSwim

vivo 官网资源包适配多场景的应用

vivo互联网技术

低代码 无服务器云函数

谁才是一级方程式赛车中的最强车手?

亚马逊AWS官方博客

产品经理训练营 - 第四章作业 (二)

joelhy

产品经理训练营

Kubelet从入门到放弃:拓扑管理(上)

DCOS

Linux Kubernetes 云原生 kubelet

第五周 继续文档的一些细节

Sicolas Flamel

产品经理 产品经理新人如何落地 产品经理训练营

Java 中各种DTO,POJO 等的概念

少平

VR,正在上演一出“风月宝鉴”

脑极体

「产品经理训练营」作业 05:知识星球加入星球流程图

狷介

产品经理训练营

云计算带来的变革将如何在2021年加速创新

浪潮云

云计算

产品训练营 - 第五周 - 作业

邹小胖

产品经理训练营

数据产品经理实战-用户运营体系搭建

第519区

算法 数据产品 数据运营

肝了很久,冰河整理出这份4万字的SpringCloud与SpringCloudAlibaba学习笔记!!

冰河

微服务 高可用 高并发 冰河技术 SpringCloud Alibaba

翻译:《实用的Python编程》03_02_More_functions

codists

Python

如果重来,结果就会好吗?「Day 10」

道伟

28天写作

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