现有webpack4项目升级记录
首页 > >    作者:lininn   2023年4月19日 14:39 星期三   热度:471°   百度已收录  
时间:2023-4-19 14:39   热度:471° 


1.升级最新的webpack5方案

webpack5相较于我们用的webpack4:
Tree Shaking 更友好,esmodule情况打包效果会很好
内置了 terser-webpack-plugin,不再需要下载安装,即可压缩代码
webpack5 内部内置了 cache 缓存机制。直接配置即可
支持模块联邦(微前端)
缺点:启动时间依旧相对较慢,升级需要改动比较大,虽支持模块联邦,但是共享需要同样升级webpack5,其他webpack4也能通过插件实现但是效果相当较差,很多语法跳转无法平缓过度,需要对各种文件的处理loader进行修改或升级(可以在wmportal web-test分支体验)

2.替换webpack构建改完vite构建(esbuild)


  1. 快速启动:Vite 的启动速度非常快,因为它采用了基于 ES 模块的开发服务器和编译器,可以在几毫秒之内启动项目。

  1. 快速热更新:Vite 支持快速的热更新,无需刷新浏览器即可看到代码更改的效果,大大提高了开发效率。

  1. 高度可配置:Vite 可以根据项目的需求进行高度定制化的配置,支持多种插件和预设。

  1. 支持多种语言:Vite 支持多种语言,包括 JavaScript、TypeScript、CSS、LESS、Sass 等。

  1. 开箱即用:Vite 可以直接使用浏览器原生支持的 ES 模块,无需进行额外的打包和构建,减少了项目的复杂度和构建时间。
wmportal项目改造后,启动仅需要376ms(M1 Pro测试),秒开
第二次:337ms
第三次:343ms
缺点:项目需要将 js和jsx改为ts和tsx,否则会报各种未知错误,需要把import type from './localeType';这种导入改成import './localeType'; css同理,需要重新配置运行环境文件,如果修改为vite启动,webpack打包,虽然webpack不影响使用,但是会报很多由js转ts的类型错误,所以如果完全可用,需要补充更多类型

3.使用webpack4+esbuild构建(改动小)

优点:webpack4配置改动相对较小,
  1. 极快的构建速度:esbuild 采用 Go 语言编写,经过优化后能够快速地完成代码打包和压缩操作,与其他主流打包工具相比,esbuild 的构建速度更快。
  2. 可扩展性强:esbuild 支持插件系统,开发者可以通过编写插件来扩展 esbuild 的功能,实现自定义的代码优化和转换。
  3. 易于使用:esbuild 提供了简单易用的命令行接口和 JavaScript API,开发者可以轻松地在项目中使用 esbuild 进行代码打包和压缩。
  4. 支持多种模块化规范:esbuild 支持多种模块化规范,包括 CommonJS、ES 模块和 AMD,可以满足不同项目的需求。
  5. 提供高质量的代码压缩:esbuild 使用了一系列先进的代码压缩算法,可以生成高质量的压缩代码,减少了代码体积,提高了网页加载速度。
缺点:需要处理很多错误,需要把import type from './localeType';这种导入改成import './localeType'; css同理
只对tsx和jsx文件处理
第二次:21564
第三次:21588
平均:21261 (较现在快467ms),意义不大,改造成本高,效果差

4.使用turbopack构建

高度优化的机器代码和低层级增量计算引擎,可以缓存到单个函数的级别。它的架构吸取了 Turborepo 和 Google 的 Bazel 等工具的经验教训,它们都专注于使用缓存来避免重复执行相同的工作。
Turbopack 建立在新的增量架构上,以提供最快的开发体验。在大型应用上,它的更新速度比 Vite 快 10 倍,比Webpack 快 700 倍。在更大的应用上,通常会比 Vite 快 20 倍。
由于 Turbopack 只打包开发所需的最少资源,因此启动时间非常快。在具有 3000 个模块的应用上,Turbopack 需要 1.8 秒即可启动,而 Vite 则需要 11.4 秒:
5.目前 方案
第二次:21074
第三次:21895
平均:21728


二维码加载中...
本文作者:lininn      文章标题: 现有webpack4项目升级记录
本文地址:?post=576
版权声明:若无注明,本文皆为“覆手为雨”原创,转载请保留文章出处。
分享本文至:

返回顶部    首页    手机版本    后花园   会员注册   
版权所有:覆手为雨    站长: lininn