AI实践哪家强?来 AICon, 解锁技术前沿,探寻产业新机! 了解详情
写点什么

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

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

关注

评论 1 条评论

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

编程培训班怎么才能选择出靠谱?

小谷哥

全球健康药物研发中心郭晋疆:多元科学计算系统在药物研发管线中的搭建与实践

阿里云弹性计算

药物研发 高性能计算 EHPC

jdk11或以上的module错误

Geek_5829b6

jdk Module

武汉大数据培训班学习要多久

小谷哥

通过部署流行 Web 框架掌握 Serverless 技术

阿里巴巴中间件

阿里云 Serverless 云原生 函数计算

网易伏羲4篇论文入选ACM MM2022,再创游戏AI领域佳绩

网易伏羲

人工智能 机器学习 算法 强化学习

Monorepo 能给前端工程带来什么

领创集团Advance Intelligence Group

前端工程师 Monorepo

Go Go 简单的很,标准库之 fmt 包的一键入门

梦想橡皮擦

Python 爬虫 8月月更

Python自学教程2:大牛们怎么写注释

和牛

Python 测试 8月月更

你需要的露营预约管理系统来啦!最新的露营案例奉上!

天天预约

SaaS应用 预约工具 露营 营地管理

报名 | 业务出海如何构建数据底座新范式?StarRocks 和 AWS 邀您同塑新思维

StarRocks

数据库

2022飞天技术峰会:硬之城如何基于 SAE 打造数智化电子工业互联网平台

阿里巴巴中间件

阿里云 Serverless 云原生 数智化

直播预告(本周六)|关于数据可观测性的精彩讨论

观测云

字节大佬的「算法界Top1笔记」火爆Github,短时间获上万star

Geek_Yin

编程 程序员 数据结构 算法 #java

上海大数据培训学习怎么样

小谷哥

web前端课程培训班哪里好?

小谷哥

聊天平台源码:选好框架是搭建聊天平台的基础

开源直播系统源码

软件开发 直播系统源码 语音直播系统 语音聊天app

【Java秋招面试宝典300题】阿里P8爆肝2个月呕心整理,挑战30天打卡秋招上岸!(基础、Spring、MySQL、JVM、微服务分布式)

退休的汤姆

Java 面经 校招 Java工程师 秋招

开发者,有没有完全自主的国产化数据库技术?

Albert Edison

数据库 云原生 中间件 8月月更 开源SPL

2022秋招,Java岗最全面试攻略,吃透25个技术栈Offer拿到手软

Geek_Yin

编程 程序员 java面试 金九银十 #java

Zebec社区利好频传,Galaxy Project上领取专属Zebec OAT

股市老人

2022年最新【Java经典面试800题】面试必备,查漏补缺;多线程+spring+JVM调优+分布式+redis+算法

Geek_Yin

编程 程序员 金九银十 #java Java面试八股文

正式线上环境下微服务平台落地实践

HelloGeek

微服务 微服务架构 Spring Cloud Service Mesh 服务网格 mesh

出海季收官,速来 Get 全球化发展实操手册

融云 RongCloud

嘎嘎牛逼!对标P7+)互联网Java高级架构师面试标准手册

Geek_Yin

阿里巴巴 程序员人生 P7架构师 #java 程序员面试、

站吗?站啊!一站式研发管理工具 ONES 团队版免费啦

万事ONES

Java: 为Word文档添加水印

Geek_249eec

Java word 水印 watermark

Python 教程之输入输出(8)—— print() 中的 Python 结束参数

海拥(haiyong.site)

Python io 8月月更

大数据编程培训班怎么样?

小谷哥

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