写点什么

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

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

关注

评论 1 条评论

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

前端开发提效小技巧之业务功能篇

叶一一

前端 提高效率 10月月更

【愚公系列】2022年10月 Go教学课程 029-面向对象简介

愚公搬代码

10月月更

Go-Excelize API源码阅读(二十三)——SetDocProps、GetDocProps

Regan Yue

Go 开源 源码刨析 10月月更

Serverless的应用场景

阿泽🧸

Serverless 10月月更

百度面试题——迷宫问题(超详细解析)

lovevivi

c 数据结构 10月月更

Spring Boot「06」Loading initial data

Samson

Java spring 学习笔记 spring-boot 10月月更

协同开发时,如何科学的使用Git紧急修复线上bug?

王中阳Go

git 敏捷开发 团队协作 10月月更 git使用规范

「趣学前端」容器上的折角边框是图形吗?

叶一一

CSS 前端 10月月更

ReentrantLock可重入、可打断、锁超时实现原理

JAVA旭阳

Java 并发 10月月更

图解ReentrantLock的条件变量Condition机制

JAVA旭阳

Java 并发 10月月更

Kafka的客户端NetworkClient如何发起的请求

石臻臻的杂货铺

Kafk 10月月更

用Java实现计算器功能

魏铁锤

10月月更

行业实践:RocketMQ 业务集成典型行业应用和实践

阿里巴巴云原生

阿里云 RocketMQ 云原生

Vue组件入门(六)派发事件的参数传递

Augus

Vue 3 10月月更

「趣学前端」box-shadow的多重用法

叶一一

CSS 前端 10月月更

浅谈etcd服务注册与发现

闫同学

Go 微服务 etcd 10月月更

一文搞懂Go整合captcha实现验证码功能

闫同学

Go Web 安全 10月月更

搭建Linux下QT开发环境与Android开发环境(嵌入式与PC机)

DS小龙哥

10月月更

Linux下编写ENC28J60网卡驱动,完善网络设备框架

DS小龙哥

10月月更

Go语言开发小技巧&易错点100例(一)

闫同学

10月月更

常见大数据应用场景

穿过生命散发芬芳

大数据 10月月更

JWT详解

Java学术趴

10月月更

Go-Excelize API源码阅读(二十二)——SetAppProps(appProperties *AppProperties)

Regan Yue

Go 开源 源码分析 Excelize 10月月更

一文搞懂常见的网络I/O模型

闫同学

网络 网络io 10月月更

Apache RocketMQ 在阿里云大规模商业化实践之路

阿里巴巴云原生

Apache 阿里云 云原生 消息队列 商业化

super关键字的作用

魏铁锤

10月月更

用栈操作构建数组

掘金安东尼

算法 10月月更

「趣学前端」页面上吸顶的效果是怎么做到的

叶一一

CSS 前端 10月月更

JavaSE 抽象类和接口

whispar

接口 Java应用 10月月更

如何在 Linux 上重新启动网络接口?

wljslmz

Linux 网络 网络接口 10月月更

WeChat Moments Performance Analysis

David

架构实战营

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