写点什么

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

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

关注

评论 1 条评论

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

智慧公安信息化管理系统,重点人员管控系统的搭建

13828808769

智慧交通

​Autonomous Dream Works的独创力杰作EGGNetwork EFTalk

币圈那点事

电子证照上链--助推智慧政务

13530558032

跪求!阿里P9手写的这份1530页的Java核心编程技术手册

周老师

Java 编程 程序员 架构 面试

Datadog 能成为最大的云监控厂商吗

睿象云

运维 运维平台 Datadog 云监控

力扣(LeetCode)刷题,简单题(第13期)

不脱发的程序猿

LeetCode 面试刷题 算法面经 28天挑战 3月日更

被MySQL慢日志查询搞废了?3分钟教你快速定位慢查询问题!

驻云DataFlux

云计算

Adobe国际认证,Photoshop软件“更改图像分辨率”官方教程

Adobe国际认证

池化技术有多牛?来,告诉你阿里的Druid为啥如此牛逼

互联网架构师小马

困扰一周的奇葩bug:重复相似代码多,导致单片机程序跑飞

不脱发的程序猿

28天写作 硬件设计 嵌入式软件 单片机 3月日更

2021最新分享三面百度提前批(Java开发岗)面经 已拿Offer

比伯

Java 编程 架构 面试 程序人生

主数据建设的挑战与发展

EAWorld

区块链中药溯源--区块链为中医药溯源认证

13530558032

能源绿色管控:天然气站启动数字化转型,工业企业该如何突围?

一只数据鲸鱼

物联网 数据可视化 智慧城市 能源管理 天然气

字节抖音iOS客户端实习 123hr面 面经

iOSer

ios 字节跳动 面试 面试经历 抖音

从解决Github TimeOut到经典面试题:从输入URL到浏览器显示页面发生了什么?

秦怀杂货店

GitHub TCP 网络 HTTP DNS

基于深度学习的两种信源信道联合编码

华为云开发者社区

深度学习 通信 编码 信源编码 信道编码

推荐 2 款必备的 Django 开发神器

星安果

Python django Web 后端 后端开发

Golang号称最快的Json解析器速度可达5623ns/op

happlyfox

go 学习 3月日更

让GitHub低头的10W字阿里内部Java面试手册有多强?

周老师

Java 编程 程序员 架构 面试

实现跨生态互联,区块链赋能智能家居新体验

旺链科技

区块链应用 智能家居

单账户实时记账能力达2万笔每秒 蚂蚁启用新一代高性能记账引擎

DT极客

程序员去大公司面试,小程序FMP优化实录,已拿offer入职

欢喜学安卓

android 程序员 面试 移动开发

区块链六大应用场景,推动政府信息化发展

13828808769

区块链+ #区块链#

如何正确使用Python临时文件

华为云开发者社区

Python 安全 临时文件 tempfile 库函数

阿里面试官:Android开发真等于废人?已拿offer附真题解析

欢喜学安卓

android 程序员 面试 移动开发

LeetCode题解:92. 反转链表 II,迭代,JavaScript,详细注释

Lee Chen

算法 LeetCode 前端进阶训练营

可能是绝唱!阿里资深工程师深度解读Netty底层核心源码

Java架构追梦

Java 源码 架构 面试 Netty

Worktile 前端工程化之路

PingCode研发中心

前端 前端工程 前端框架

Adobe国际认证|深度解析,如何用Adobe证书发展职业!

Adobe国际认证

低代码是什么?低代码价值主要体现在哪?

优秀

低代码

技术为帆,纵横四海- Lazada技术东南亚探索和成长之旅

技术为帆,纵横四海- Lazada技术东南亚探索和成长之旅

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