硬核干货——《中小企业 AI 实战指南》免费下载! 了解详情
写点什么

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

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

关注

评论 1 条评论

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

想要了解华为IPD,先要了解需求如何管理!华为云CodeArts Req:支撑需求全生命周期管理,助力产研团队高效协作

轶天下事

记录 re:Invent 大会,使用 PartyRock 编写我们第一个 AI 应用以及心得

亚马逊云科技 (Amazon Web Services)

人工智能 API re:Invent 生成式人工智能

【CodeArts开发者实践】CodeArts开发者八件套——开发者的进阶宝典!

轶天下事

代码检查入门

轶天下事

猜字谜|构建生成式 AI 应用实践(一)

亚马逊云科技 (Amazon Web Services)

华为云CodeArts Snap荣获信通院优秀大模型案例及两项荣誉证书

平平无奇爱好科技

知识图谱与大模型结合方法概述

轶天下事

风靡万千软件开发者:揭秘华为研发代码大模型是如何实现的?

平平无奇爱好科技

Runaway Queries 管理:提升 TiDB 稳定性的智能引擎

PingCAP

MySQL 数据库 TiDB

数据价值在线化丨TiDB 在企查查数据中台的应用及 v7.1 版本升级体验

PingCAP

MySQL 数据库 开源 分布式 TiDB

华为云自主创新再迎成果:软件工具链为数字政府夯实研发新基建

轶天下事

安擎科技携手华为云区块链共同打造安全天空

轶天下事

Git 版本控制系统的完整指南

小万哥

git 程序人生 编程语言 软件工程 后端开发

可逆计算理论中的可逆到底指的是什么?

canonical

低代码 软件架构 开发框架 可逆计算 Nop平台

快手商品详情数据接口解析和封装

tbapi

快手 快手商品详情数据接口

NOW 闹个元宵?与亚信安慧AntDB一起猜灯谜,抽奖品

亚信AntDB数据库

数据库 AntDB AntDB数据库

TiDB 社区智慧合集丨TiDB 相关 SQL 脚本大全

PingCAP

MySQL 数据库 TiDB

ERC404 + meme 文化叙事,Dancing Beans 会达到怎样的高度?

股市老人

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