写点什么

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

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

关注

评论 1 条评论

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

JAVA基于物联网技术的智慧校园电子班牌原生微信小程序源码

源码星辰

智慧校园管理系统

11种编程语言中,返回多个不同类型的方法样例

华为云开发者联盟

编程语言 开发 华为云 华为云开发者联盟

云教室服务器配置详解

青椒云云电脑

云教室 云教室解决方案

如何删除/替换3D模型的材质贴图

3D建模设计

材质合批 材质修改 材质贴图 材质纹理

中国如何才能出世界级零售企业?

第七在线

数据中台即服务——数据中台的四大支柱

用友BIP

如何创建逼真的3D模型

3D建模设计

材质修改 材质贴图 材质纹理

CNCF首个云原生多云容器编排项目Karmada正式晋级孵化

华为云开发者联盟

云原生 后端 华为云 华为云开发者联盟

模型放置到3D场景中后模型位置与鼠标选中的位置不一致怎么办?

3D建模设计

材质合批 材质修改 材质贴图 材质纹理

38 | 分治算法:谈一谈大规模计算框架MapReduce中的分治思想

鲁米

分布式基础概念-消息中间件[Kafka]

派大星

大数据 Java 面试题

数据中台的业务价值和技术价值

用友BIP

数据中台

认证LeSS实践者课程 - 2024.1,广州

ShineScrum

大规模敏捷

从技术角度分析如何选择灰度测试方式

Onegun

功能测试 灰度测试

桌面云的发展前景与机遇

青椒云云电脑

桌面云 云桌面 云桌面厂家

云桌面技术的革新

青椒云云电脑

桌面云 云桌面

摆脱Excel 寻求现代零售智能化管理的出路

第七在线

GLB/GLTF 模型压缩轻量化

3D建模设计

材质合批 材质修改 材质贴图 材质纹理

一招MAX降低10倍,现在它是我的了 | 京东云技术团队

京东科技开发者

缓存 性能优化 缓存优化 OHC

云桌面的应用场景及利弊

青椒云云电脑

云桌面 云电脑 云桌面系统

39 | 回溯算法:从电影《蝴蝶效应》中学习回溯算法的核心思想

鲁米

阿里云人工智能平台PAI多篇论文入选EMNLP 2023

阿里云大数据AI技术

AI

第七在线(7thonline):助力零售业解决发展难题,驱动智能化转型

第七在线

软件测试/人工智能|教你掌握 Conda 的基本用法

霍格沃兹测试开发学社

最佳实践 | 第七在线智能采购计划助力全渠道销售决策

第七在线

数据驱动国有企业数智化转型,平台底座将发挥重要作用

用友BIP

数据驱动

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