写点什么

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

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

关注

评论 1 条评论

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

【FastDFS】小伙伴们说在CentOS 8服务器上搭建FastDFS环境总报错?

冰河

分布式存储 fastdfs

架构师训练营第 1 期 - 第二周课后练习

Anyou Liu

极客大学架构师训练营

LeetCode题解:590. N叉树的后序遍历,递归,JavaScript,详细注释

Lee Chen

大前端 LeetCode

架构师训练营第二周课后作业

Gosling

极客大学架构师训练营

程序员陪娃漫画系列——修空调

孙苏勇

程序员 陪伴 漫画

用于门牌号码检测的深度学习

计算机与AI

学习 分类

在用户现场,你需要注意的几件事情

boshi

项目管理 实施 需求分析

第二周作业

龙卷风

极客大学架构师训练营

SQL 如何做 Join

Rayjun

sql

2020.09.21-2020.09.27 学习总结

icydolphin

极客大学架构师训练营

第二周作业

饭桶

基础框架第二周作业「架构师训练营第 1 期」

天天向善

设计原则

第2周 框架设计总结

bearlu

极客时间架构师培训 1 期-第2周总结

Kaven

行到瀚海阑干处,坐看华为云起时:中国互联网航海家的远大征程

脑极体

游戏夜读 | 数据治理的悖论

game1night

架构师训练营 1 期 - 第二周作业(vaik)

行之

第二周作业

icydolphin

极客大学架构师训练营

flutter 中的video player对比学习

Daniel

一个草根的日常杂碎(9月24日)

刘新吾

社会百态 生活随想 日常杂碎

架构师训练营 Week2 - 课后作业

依赖倒置原则 接口隔离原则

如果编程语言是一门武功绝学

C语言与CPP编程

c++ 编程 程序员 程序人生 编程语言

Week 2 Assignment

Yinan

理解依赖倒置原则

林杭戴

极客大学架构师训练营

第二周学习总结

林杭戴

极客大学架构师训练营

信息获取的四个层级,看看你在哪一级?

boshi

学习 正确阅读 信息需求

【架构笔记之架构方法】架构师训练营第1期第1周

业哥

极客大学架构师训练营

命题作业

黄立

设计模式

TensorFlow 篇 | TensorFlow 2.x 分布式训练概览

Alex

tensorflow keras 分布式训练

基础框架第二周总结「架构师训练营第 1 期」

天天向善

基础框架

架构师训练营 Week2 框架设计- 学习总结SOLID

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