50万奖金+官方证书,深圳国际金融科技大赛正式启动,点击报名 了解详情
写点什么

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

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

关注

评论 1 条评论

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

一款带数字传输信号的OVP芯片

芯动大师

「Macos排版神器」Affinity Publisher for Mac中文直装版

彩云

Affinity Publisher

Jenkins 打包shell出现gradle命令不存在,jvm内存溢出

javaNice

Java jenkins

Redis缓存雪崩、击穿、穿透解释及解决方法,缓存预热,布隆过滤器 ,互斥锁

javaNice

Java redis

使用 Filebeat+Easysearch+Console 打造日志管理平台

极限实验室

Filebeat console 日志管理 easysearch

WordPress 基于亚马逊云的部署实践(一)- 架构设计

wangkx

AWS 亚马逊云 Amazon EC2 云服务器

连接亚马逊云EC2的几种方式

孤虹

AWS EC2、阿里云ECS、腾讯云CVM初步对比

穿过生命散发芬芳

腾讯云 阿里云 AWS

你真的了解“有钱人”吗?

少油少糖八分饱

笔记 阅读 搞钱 致富 有钱人

IP代理安全吗?如何防止IP被限制访问?

Geek_bf375d

Apeaksoft Data Recovery for Mac中文版 数据恢复工具

彩云

数据恢复 Apeaksoft Data Recovery

「AI技术图像编辑软件」Luminar Neo for Mac

彩云

Luminar Neo AI技术图像编辑软件

openAi基于java jtokkit实现分词

智慧源点

jtokkit

亚马逊Amazon OpenSearch Serverless"利刃在手,‘向量’八方"

淼.

Python连接es笔记二之查询方式汇总

Hunter熊

Python elasticsearch Elasticsearch-dsl

亚马逊云EC2部署QNAP

孤虹

Unite for mac「将网站转换为应用程序」

加油,小妞!

Unite for Mac

亚马逊云科技AI创新应用下的托管在AWS上的数据可视化工具—— Amazon QuickSight

淼.

智慧工地管理平台源码

源码星辰

工地 智慧工地

新网的机房写的是BGP链路,什么是BGP链路啊?

Geek_f19a80

服务器

2023-11-18:用go语言,如果一个正方形矩阵上下对称并且左右对称,对称的意思是互为镜像, 那么称这个正方形矩阵叫做神奇矩阵。 比如 : 1 5 5 1 6 3 3 6 6 3 3 6 1 5

福大大架构师每日一题

福大大架构师每日一题

「Macos好用的图片处理工具」Affinity Photo 最新中文版

加油,小妞!

图像处理 Affinity Photo

Coherence X for Mac「网站转换为Mac应用」

彩云

Coherence X

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