写点什么

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

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

关注

评论 1 条评论

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

首发|Clusterpedia 0.1.0 四大重要功能

Daocloud 道客

开源项目 多云管理 K8s 多集群管理 多云资源复杂检索

会声会影2022脸部索引功能详解

懒得勤快

脱颖而出!OceanBase 入选 2021“科创中国”开源创新榜单

OceanBase 数据库

数据库 分布式 OceanBase 开源 科创中国

2022年数据库审计厂家就选行云管家!功能强大!

行云管家

数据库 网络安全 数据库审计

混合云管平台排名您知道吗?看这里!

行云管家

混合云 云管

【C语言】一篇速通操作符

謓泽

C语言 操作符 3月月更

云原生多云应用利器 -- Karmada 调度器

Daocloud 道客

Kubernetes 云原生 开源软件 Karmada

2022,你的团队距离持续部署还有多远?| 研发效能提升36计

阿里云云效

阿里云 云原生 持续部署 研发团队 研发

上手体验!如何借助龙蜥实验室快速部署 Web 应用?

OpenAnolis小助手

开源 国产操作系统 web服务器

web前端培训:Vue3 调度系统的深度剖析

@零度

Vue 前端开发

《隐私计算》重磅发布,全面、系统论述数据要素安全流通价值

博文视点Broadview

智汇华云 | Kubernetes多集群管理方案kubefed原理解析

华云数据

云计算 华云数据 虚拟云

始于信任 忠于专业|DataPipeline收到一封来自山东城商行联盟的感谢信

DataPipeline数见科技

大数据培训:Spark高频面试题汇总

@零度

大数据 spark

java培训:MyBatis的架构与原理分析

@零度

mybatis JAVA开发

如何获取 Docker 容器的 IP 地址

AlwaysBeta

Docker 容器

Web 键盘输入法应用开发指南 (3) —— 输入法事件

天择

JavaScript 键盘 输入法 3月月更

微服务身份认证需求下的私钥托管痛点与破局

全象云低代码

微服务 低代码 身份认证 鉴权 密钥

2022年1月娱乐直播行业用户洞察:行业格局稳定,内容运营精细化

易观分析

2022年的SaaS行业,钱往哪里去?

ToB行业头条

云原生网络利器--Cilium 总览

Daocloud 道客

ebpf cilium 云原生网络 容器网络方案

高性能图计算系统 Plato 在 Nebula Graph 中的实践

NebulaGraph

图数据库 图计算 分布式图数据库

DM 中 relay log 性能优化实践丨TiDB 工具分享

PingCAP

EMQ 正式成为 OASIS 最高级别成员,主导推进物联网协议标准化应用

EMQ映云科技

开源 物联网 ibm mqtt OASIS

《重构 JavaScript》读后感和部分摘录

道道里

前端 测试 重构

Kafka中指定副本为Leader的三种实现方式

石臻臻的杂货铺

kafka 运维

数仓中长跳转问题复现及解决方案

华为云开发者联盟

寄存器 GaussDB(DWS) 长跳转 编译器O2

IOS技术分享| anyLive 开源项目

anyRTC开发者

ios 音视频 移动开发 视频直播 开源demo

一文全面掌握大数据关联与汇聚

云智慧AIOps社区

redis Clickhouse flink sql 大数据开发

从Nacos到完全自研|得物的注册中心演进之路

得物技术

架构 raft 注册中心 实例 兼容性测试

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