webpack拓展篇(六十八):bundle 和 bundless 的差异

简介: webpack拓展篇(六十八):bundle 和 bundless 的差异

说明

玩转 webpack 学习笔记



vite 发布 2.0 版本

https://vitejs.cn/

Vite 是一种新型前端构建工具,能够显著提升前端开发体验。它主要由两部分组成:


   一个开发服务器,它基于 原生 ES 模块 提供了 丰富的内建功能,如速度快到惊人的 模块热更新(HMR)。


   一套构建指令,它使用 Rollup 打包你的代码,并且它是预配置的,可输出用于生产环境的高度优化过的静态资源。


13ea8850d393478ea1e69e6c0cc2dcb1.png


更早实践 bundless 的工具:Snowpack

https://www.snowpack.dev/


Snowpack 是一个闪电般快速的前端构建工具,专为现代网络而设计。 它是开发工作流程中更重、更复杂的打包工具(如 webpack 或 Parcel)的替代品。 Snowpack 利用 JavaScript 的本机模块系统(称为 ESM)来避免不必要的工作并保持快速,无论您的项目有多大。

de021d08b7434aa290bd42b5a9d5a236.png


浏览器对ESM的支持情况

https://caniuse.com/?search=javascript%20modules

f09f1d0e4f2b4af7b749dd7ff28833b7.png



HTTP/1.1 的请求数限制

打包会合并文件,减少请求数

3c51752e38874d29b8fa7108b4993cb7.png


HTTP/2 越来越多的应用在主流网站

比如CSDN网站:


b9e17693ee3f45f5a690162c10ccbe8e.png



比如抖音网站:

image.png


资源加载差异

打包成一个文件

6d595c85eafd4bb2be633cbff3dbc700.png

bundless:浏览器请求多个文件

ee6629f589c44990824370d5612b5760.png



bundle 浏览器最开始会加载一个 bundle.js 文件


b1b3071dcb0548a6806315ce044890fa.png


bundless 直接加载原文件,不是加载构建好的


3dc1cb399db24f9687fc7bcd6951a177.png


打包速度的对比


  • bundless 的冷启动时间大大缩短
  • bundless 的 HMR 速度不受整个项目体积影响
  • bundless 的单文件粒度的缓存更优


image.png


开发体验的对比

以 webpack 里面的 sourcemap 类型举例

bundle 依赖 sourcemap,并且类型很多


d310a87b723d451bb2b875551d751e70.png


bundless 直接打 debugger 就行,调试起来相对简单


190675e4abe247869c58b297384f93ff.png


目录
相关文章
|
11月前
|
JavaScript 前端开发
Webpack 中的 module、chunk、bundle 究竟是什么?
Webpack 中的 module、chunk、bundle 究竟是什么?
252 0
|
数据可视化 JavaScript 前端开发
7中方式来减少webpack bundle体积
使用Webpack4并启用production模式;处理lodash.js;处理moment.js;作用域提升(Scope hoisting)
|
JSON 缓存 JavaScript
webpack拓展篇(六十九):vite 的构建原理(完结)
webpack拓展篇(六十九):vite 的构建原理(完结)
144 0
webpack拓展篇(六十九):vite 的构建原理(完结)
|
存储 缓存 JSON
webpack拓展篇(六十七):webpack5 新特性解析
webpack拓展篇(六十七):webpack5 新特性解析
317 0
webpack拓展篇(六十七):webpack5 新特性解析
webpack中module package bundle chunk详细讲解
webpack中module package bundle chunk详细讲解
84 0
|
数据可视化 前端开发
前端打包优化分析的可视化工具——Webpack Bundle Analyzer
https://juejin.cn/editor/drafts/7101180318144708621 打包优化每个项目的时候,除了看控制台每个包的大小,其实十分推荐一款插件工具 **`Webpack Bundle Analyzer`**
938 0
|
前端开发 JavaScript
webpack术语之module、chunk和bundle
webpack术语之module、chunk和bundle
522 0
webpack术语之module、chunk和bundle
|
前端开发 JavaScript 编译器
走近webpack(4)--css相关拓展
  我们前面已经学了很多webpack基本的处理情况,一句话总结就是,一个优秀的webpack项目,主要的核心用法就是整合loader和plugin去处理你想要的任何需求。   下面,咱们一起来学学如何用webpack来处理less,sass等预编译器。
1174 0
|
1月前
|
JavaScript 前端开发
webpack成长指北第9章---webpack如何对icon字体进行打包
webpack成长指北第9章---webpack如何对icon字体进行打包
52 1
|
1月前
|
前端开发 JavaScript
webpack成长指北第7章---webpack的css\less\scss样式打包
webpack成长指北第7章---webpack的css\less\scss样式打包
51 0