写点什么

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

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

关注

评论 1 条评论

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

Activity启动流程分析(android-29),Android面试题库

android 程序员 移动开发

Activity生命周期详解,android游戏开发实践指南

android 程序员 移动开发

iOS开发:平时做项目经常用到的快捷键归纳

三掌柜

11月日更

Andorid性能优化之traceview的使用(不懂揍我),androidstudio计算器

android 程序员 移动开发

Android App安装包大小优化,Android开发面试技能介绍

android 程序员 移动开发

Android Ashmem匿名共享内存,科学技术协会面试

android 程序员 移动开发

Android D8 编译器 和 R8 工具,android零基础开发

android 程序员 移动开发

5道刁钻的Activity生命周期面试题,学完去吊打面试官!

android 程序员 移动开发

8年Android开发程序员教你如何写简历!看完别再问为何你只值5K

android 程序员 移动开发

9成Android开发者必须收藏的80个开源库,安卓rxjava获取网络时间

android 程序员 移动开发

9次Android面试经验总结,已收字节,阿里,2021Android开发面试解答之设计模式篇

android 程序员 移动开发

AdapterViewFlipper 图片_文字 轮播动画控件,【面试必会】

android 程序员 移动开发

andriod搭建自己的轮询框架,flutter开发环境

android 程序员 移动开发

Android 10 适配攻略,最新阿里Android面试题目

android 程序员 移动开发

android Alarm闹钟发送广播播放音乐,【大牛疯狂教学

android 程序员 移动开发

8年Android开发程序员教你如何写简历!看完别再问为何你只值5K(1)

android 程序员 移动开发

Android DataBinding 从入门到进阶,android路由实现

android 程序员 移动开发

7年老Android收到阿里offer,跟领导提离职被怼:为年薪百万不做兄弟

android 程序员 移动开发

8年老Android开发谈;Context都没弄明白凭什么拿高薪?

android 程序员 移动开发

Activity Result API 使用与源码分析,移动端开发基础

android 程序员 移动开发

Activity页面的绘制流程,移动端跨平台开发

android 程序员 移动开发

Android Systrace 使用方法,互联网寒冬

android 程序员 移动开发

Android 11 Settings源码入门,flutter安装

android 程序员 移动开发

6年老Android2019面经总结,Android面试必刷的200道真题

android 程序员 移动开发

Android - singleTask启动模式详解,kotlin常用高阶函数

android 程序员 移动开发

Android 12 行为变更:适配以Android 12为目标的应用,移动应用开发就业方向

android 程序员 移动开发

android activity Intent 传值 传对象,移动智能终端的发展趋势

android 程序员 移动开发

5分钟看完这篇-HTTPS面试常问全解析,不管去哪里面试都能轻松装13!

android 程序员 移动开发

Android 12 行为变更:适配以Android 12为目标的应用(1)

android 程序员 移动开发

Android 9 Pie 现已面向全球正式发布!,flutter插件播放音乐

android 程序员 移动开发

Android Camera 内存问题剖析,Android屏幕适配很难嘛其实也就那么回事

android 程序员 移动开发

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