写点什么

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

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

关注

评论 1 条评论

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

2024 Intersolar Europe,这家中国能源新秀再次瞩目!

科技汇

软件测试学习笔记丨JUnit5重复测试

测试人

软件测试

AI Agent 开发者对话:科研和商业化落地

奇绩创坛

人工智能 创业 AI 大模型 agent

NineData和华为云在一起!

NineData

数据库 DevOps 华为云 NineData GuassDB

完美解决 WebSocket 连接失败的技巧

Liam

程序员 后端 websocket

软件测试学习笔记丨JUnit5标记测试用例

测试人

软件测试 测试开发

python中对于wordcloud词云生成报错提示的解决

我再BUG界嘎嘎乱杀

Python wordcloud 词云

制造业包括哪些?需要堡垒机吗?

行云管家

网络安全 信息安全 堡垒机 制造业

惊艳!老司机熬夜总结的Python高性能编程,高效、稳定、快速!

我再BUG界嘎嘎乱杀

Python 后端 高性能 开发语言

深度解析:利用1688 API获取商品详情的全面指南

Noah

基于Vue+thinkPhP6前后端分离的多客陪玩管理系统100%原生源码/技术培训/运维协助/开发文档齐全/官方终身授权/全球搭建部署/支持二次开发

DUOKE七七

GPT-4o差点没及格!首个多任务长视频评测基准,它有亿点难

Openlab_cosmoplat

ChatGPT GPT-4 人工智能、

HDC 2024 | 华为云云原生开源+OpenHarmony,加速开发者应用创新

华为云开源

开发者 云原生 华为开发者大会 华为云开源

草莓不是莓,西瓜才是莓——解读 Kubernetes 中被驱逐的 Pod

小猿姐

Kubernetes 云原生

突破Web3红海,DePIN如何构建创新生态系统?

TechubNews

web3、

交互式原型设计神器:Axure RP 9 for Mac/win版中文激活版

你的猪会飞吗

mac软件下载 苹果软件下载

GitHub星标破千Star!Python游戏编程的初学者指南

我再BUG界嘎嘎乱杀

Python 入门 开发语言 零基础 游戏编程

在 Go 语言中如何让结构体不可比较?

伤感汤姆布利柏

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