《玩转webpack》学习笔记之day19 加餐

迷路的小兰
64 阅读2分钟

webpack 5新特性解析

image.png

新特性概览

image.png

最小Node.js 版本：10.13.0

image.png

功能清除：清理弃用的能力

所有在webpack4里面被废弃的能力被清除，因此需要确保webpack没有打印告警。

image.png

功能清除：不再为Node.js模块引入polyfill

image.png

image.png

长期缓存：确定的模块Id、chunk和导出名称

在生产模式下，默认的chunkIds：“deterministic”，modules：“determiniisitic”，设置成determministic时默认最小3位数字会被使用

image.png

image.png

持久化缓存

在webpack4里，可使用cache-loader将编译结果写入缓存，还可以使用babel-loader，设置option.cacheDirectory将babel-loader编译的结果写进磁盘。

image.png

构建优化：Tree Shaking优化-嵌套的Tree shaking

image.png

构建优化：Tree Shaking优化-内部模块Tree shaking

image.png

代码生成：支持生成ES6代码

webpack4之前只生成ES5代码。webpack5则现在既可以生成ES5又可以生成ES6/ES2015代码。 两种设置方式：5=〈ecmaVersion〈= 11或2009 =〈 ecmaVersion 〈= 2009

image.png

开创性特性：模块联邦

微前端

image.png

不用发npm包

开创性特性： ModuleFederationPlugin 介绍

image.png

开创性特性：模块联邦使用案例

image.png

构建对比

image.png

bundle和bundless的差异

image.png

image.png

image.png

image.png

1.1 版本 chrome 最大 6个请求数 ，firefox 9个，ie11 12个，safari13 16个

HTTP 2 没限制

image.png

资源加载差异

image.png

打包速度对比

image.png

开发体验对比

image.png

Vite的构建原理

Vite构建速度快的原因

image.png

esbuild使用golang语言，静态语言比动态语言快

Vite打包流程-创建构建服务

image.png

Vite打包流程-静态文件托管服务

image.png

Vite打包流程-重写模块路径

image.png

image.png

Vite打包流程-静态资源打包策略

image.png

Vite打包流程-vue脚本打包策略

image.png

Vite打包流程-css资源打包策略

image.png

image.png

image.png

Vite打包流程- 模版打包策略

image.png

参考

程柳锋 《极客时间》《玩转webpack》加餐

avatar
文章
阅读
粉丝