现有webpack4项目升级记录

emer 发布于 2023-4-19 14:39 615 次阅读

1.升级最新的webpack5方案

    webpack5相较于我们用的webpack4：

    Tree Shaking 更友好，esmodule情况打包效果会很好

    内置了 terser-webpack-plugin，不再需要下载安装，即可压缩代码

    webpack5 内部内置了 cache 缓存机制。直接配置即可

    支持模块联邦（微前端）

    缺点：启动时间依旧相对较慢，升级需要改动比较大，虽支持模块联邦，但是共享需要同样升级webpack5，其他webpack4也能通过插件实现但是效果相当较差，很多语法跳转无法平缓过度，需要对各种文件的处理loader进行修改或升级(可以在wmportal web-test分支体验)

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

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

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

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

支持多种语言：Vite 支持多种语言，包括 JavaScript、TypeScript、CSS、LESS、Sass 等。

开箱即用：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配置改动相对较小，

极快的构建速度：esbuild 采用 Go 语言编写，经过优化后能够快速地完成代码打包和压缩操作，与其他主流打包工具相比，esbuild 的构建速度更快。
可扩展性强：esbuild 支持插件系统，开发者可以通过编写插件来扩展 esbuild 的功能，实现自定义的代码优化和转换。
易于使用：esbuild 提供了简单易用的命令行接口和 JavaScript API，开发者可以轻松地在项目中使用 esbuild 进行代码打包和压缩。
支持多种模块化规范：esbuild 支持多种模块化规范，包括 CommonJS、ES 模块和 AMD，可以满足不同项目的需求。
提供高质量的代码压缩：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