Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

chore: 升级vitev5 版本,规定node版本>=18.0.0pnpm版本>=8.6.10 #738

Merged
merged 26 commits into from
Nov 10, 2023

Conversation

xiaoxian521
Copy link
Member

@xiaoxian521 xiaoxian521 commented Sep 17, 2023

Tip: 等待vite正式发布v5.0.0后同步升级

vite v5.0.0进度,大概11月中旬发布正式版

vite5 的server.warmup新功能几乎将平台启动期间的初始页面加载时长缩短一半,从之前的8秒变成4

规定平台运行需要node版本>=18.0.0pnpm版本>=8.6.10原因如下:

  1. vite v5.0.0版本将包升级到最低要求node>=18.0.0 具体看 feat!: bump minimum node version to 18 vitejs/vite#14030
  2. node官方v20版本作为目前的长期维护版本,如下图

image

  1. 对于pnpm版本要求>=8.6.10是参照 pnpm源码 使用的版本

Vite5放弃对 Node 14Node 16 的支持,Node 15Node 17Node 19这三个版本也没有被node官方作为长期支持版本

关于node版本发布信息可以看这里 https://nodejs.org/en/about/previous-releases

综上所述,该pr合并后,推荐使用node V18.18.2node V20 LTSnode V21以及pnpm V8.6.10版本或pnpm最新版来运行本平台(当然这些版本不是固定的,可以随着官方推荐的长期维护版本自行安装)

@xiaoxian521 xiaoxian521 added PR::WIP 正在开发中 test:waiting 等待测试 test:add report 需要添加测试报告 labels Sep 17, 2023
@xiaoxian521
Copy link
Member Author

xiaoxian521 commented Oct 20, 2023

vite5lightningcss相关代码有些优化,我也进行了一些尝试。这里记录下(仅针对本平台),方便后续可能对这块修改做参考

如下图所示,安装lightningcss并在打包时使用lightningcss压缩css

pnpm add lightningcss -D
build: {
  cssMinify: "lightningcss",
}
image

目前平台使用的是cssnano进一步压缩css,实际对比下来打包时长和lightningcss并无多少差别(引入lightningcss没有必要),而且cssnano已经在平台使用很长时间,并没有接收到任何有关问题的反馈,也就是说cssnano在本平台中更稳定

我尝试只使用lightningcss打包压缩css以及lightningcsscssnano一起打包压缩css,打包大小都确实减少了点,后者减少更多,但稳定性还未测试(引入lightningcss需自行测试生产环境样式)

lightningcss再发展一段时间,平台将会再次进行测试(当前测试日期2023-10-20

@xiaoxian521 xiaoxian521 added the v5.0.0 5.0.0版本 label Oct 20, 2023
@xiaoxian521
Copy link
Member Author

xiaoxian521 commented Oct 22, 2023

vite.config.ts更名为vite.config.mtspostcss.config.js更名为postcss.config.cjs记录:

vite.config.ts更名为vite.config.mts原因如下:

  1. Vite Node APICJS 版本已弃用,并将在 Vite 6 中删除,也就是说后续使用平台写代码时优先采用ESM标准模块化语法,这也推动着前端生态的不断标准化
  2. 使用vite.config.mts时,要求vite.config.mts文件里均需使用esm语法,在vite项目启动时,会检测vite.config.mts文件,如果存在CJS语法,会定位使用CJS语法的具体位置,用户自行修改成esm语法即可
ESM简介 现代浏览器支持 ESM(ES Modules)语法,可以直接解析和执行模块化的JavaScript代码。 ESM是ECMAScript标准提供的一种模块化系统,它允许开发者在JavaScript中使用import和export语法来导入和导出模块。ESM 是一种静态加载方式,模块在运行之前会被解析和编译,以确定模块之间的依赖关系。 不同于旧有的CommonJS或AMD规范,在浏览器中使用ESM不需要额外的工具或库。现代浏览器内置了对ESM的支持,可以直接使用<script type="module">标签加载并执行使用ESM语法编写的JavaScript文件。

postcss.config.js更名为postcss.config.cjs原因如下:

postcss 配置文件只支持 CJS,尚不支持 ESM ,不过会在未来几年提供支持,具体看 postcss/postcss#1858 (comment)
postcss本身以及postcss相关插件都需支持esm,工程庞大)
当项目的package.json添加了"type": "module" 如果不使用postcss.config.cjs就会无法启动项目,因为添加"type": "module"到项目的package.json后,所有*.js文件现在都解释为 ESM,并且需要使用 ESM 语法。
vite5后,只能使用扩展名重命名文件.cjs以继续使用 CJS

更多详情看 https://main.vitejs.dev/guide/troubleshooting.html#vite-cjs-node-api-deprecated

@xiaoxian521
Copy link
Member Author

xiaoxian521 commented Nov 2, 2023

"type": "module" 加入到 package.json 中,vite.config.mts 还原为 vite.config.ts

至此vue-pure-admin全面拥抱ESM标准模块化语法,紧随现代流行的 JavaScript 开发趋势

@xiaoxian521 xiaoxian521 removed PR::WIP 正在开发中 test:waiting 等待测试 test:add report 需要添加测试报告 labels Nov 6, 2023
@xiaoxian521 xiaoxian521 merged commit 10e68d6 into main Nov 10, 2023
1 check passed
@xiaoxian521 xiaoxian521 deleted the chore/vite branch November 10, 2023 05:16
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
v5.0.0 5.0.0版本
Projects
None yet
Development

Successfully merging this pull request may close these issues.

1 participant