写点什么

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

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

关注

评论 1 条评论

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

我终于学会的前端技能——代码调试、打断点

小白Coding日志

Vue 前端 vscode JavaScrip debugger

光纤接入网的方式有哪几种?

小魏写代码

从“用数据说话”到“让数据说话”,全面数据服务焕发酒店生意新生

用友BIP

数据资产

五大场景,助力煤炭行业设备资产数智化管理

用友BIP

资产管理

图像和文档透明显示软件 Overlay激活版最新

胖墩儿不胖y

Mac软件

【专家观点】社会化架构支撑产业链服务

用友BIP

产业链

零一万物回应「抄袭 LLaMA」;京东原副总裁试用可穿戴人工喉丨 RTE 开发者日报 Vol.85

声网

C++异常处理:如何使用try、catch、throw

互联网工科生

C++

基于 Amazon EKS 搭建开源向量数据库 Milvus

亚马逊云科技 (Amazon Web Services)

向量数据库 大语言模型

Linux系统中软链接和硬链接

高端章鱼哥

Linux 软链接

电脑网站支付报错“验签出错,建议检查签名字符串或私钥与应用公钥是否匹配”问题解决记录

盐焗代码虾

Java 支付宝报错 排查思路

医院智慧运营管理转型,到底应该如何推动?

用友BIP

用PHP使用API接口获取虾皮商品详情

Noah

阿里云宕机带来的稳定性思考

老张

混沌工程 全链路压测 稳定性保障

添添闺蜜机销量超12000台,市场领先优势进一步凸显

新消费日报

用友力量!三峡、中粮、云投等众多央国企成功上线数智化领先实践项目

用友BIP

企业数智化

「智造」第7期:浅谈工业生产设备采集方式

用友BIP

智能制造

Infuse for Mac(音视频播放器) 7.6.3永久激活版

mac

苹果mac Windows软件 Infuse 多媒体播放器

数据查询慢?别着急,读个执行计划定位优化下

NebulaGraph

性能优化 图数据库 NebulaGraph

大模型在数据分析场景下的能力评测|进阶篇

Kyligence

数据分析 指标平台

IPQ9574 IPQ9554 /QCN9274 / QCN6274  limitless- speed, endless possibility, new WiFi 7

wifi6-yiyi

WiFi7 ipq9574

油猴Safari浏览器插件 Tampermonkey最新中文版

mac大玩家j

Mac软件 油猴插件

【云栖2023】姜伟华:Hologres Serverless之路——揭秘弹性计算组

阿里云大数据AI技术

大数据

香港服务器助您实现在线业务的成功之路

一只扑棱蛾子

香港服务器

神秘的SQL AST抽象语法树

张磊

sql AST 语法树

从 MLOps 到 LMOps 的关键技术嬗变

Baidu AICLOUD

大模型 LLMOps 千帆大模型平台 LMops

应用架构的演进 I 使用无服务器保证数据一致性

亚马逊云科技 (Amazon Web Services)

Serverless 微服务 Amazon DynamoDB Amazon Step Functions

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