fix(ci): compress build chunks #1375

mengqiuleo · 2024-02-04T15:41:27Z

PR

PR Checklist

Please check if your PR fulfills the following requirements:

The commit message follows our Commit Message Guidelines
Tests for the changes have been added (for bug fixes / features)
Docs have been added / updated (for bug fixes / features)

PR Type

What kind of change does this PR introduce?

What is the current behavior?

Issue Number: N/A

What is the new behavior?

Does this PR introduce a breaking change?

Yes
No

Other information

github-actions · 2024-02-04T15:46:15Z

PR preview has been successfully built and deployed to https://tiny-vue-pr-1375.surge.sh.

github-actions · 2024-02-04T16:01:46Z

PR preview has been successfully built and deployed to https://tiny-vue-pr-1375.surge.sh.

github-actions · 2024-02-04T16:23:28Z

PR preview has been successfully built and deployed to https://tiny-vue-pr-1375.surge.sh.

github-actions · 2024-02-04T17:08:26Z

PR preview has been successfully built and deployed to https://tiny-vue-pr-1375.surge.sh.

mengqiuleo · 2024-02-04T17:55:05Z

目前文件数量为：4002

vite打包优化：

现状：

文件数量过多，但是每个文件体积只有几kb
eg：

E:/tiny-vue/examples/sites/demos/pc/app/link-menu/basic-usage-composition-api.vue?vue&type=script&setup=true&lang.jsx
E:/tiny-vue/examples/sites/demos/pc/app/link-menu/basic-usage.vue?vue&type=script&lang.jsx
E:/tiny-vue/examples/sites/demos/pc/app/link-menu/custom-foot-composition-api.vue?vue&type=script&setup=true&lang.jsx

打包时，上面的三个文件最终会生成三个文件。

vite-plugin-static-copy 插件在复制时，./demos/${env.VITE_APP_MODE}/** 路径貌似会递归复制。
eg:

./demos/${env.VITE_APP_MODE}/* 好像可以直接 copy 整个文件夹。

可以在这个网站测试一下：vite-plugin-static-copy

解决

1. `@demos`

@demos 文件夹下只需要一份 app，剩余拍平的文件夹都删掉，同时删掉 .spec.ts 结尾的文件。
（vite-plugin-static-copy 插件支持使用正则排除不拷贝的文件，但是我一直没成功，只能实现去除当前目录的文件，对较深层级的子文件不生效，所以在生产环境中不使用插件，写了一个js脚本手动复制同时去除测试文件）

2. chunk合并

最好是每个组件只生成一个打包文件，使用 rollup 的 manualChunks 处理。
同时对第三方依赖分包。

Issues-translate-bot · 2024-02-04T17:55:17Z

Bot detected the issue body's language is not English, translate it automatically.

The current number of files is: 4002

vite packaging optimization:

status quo:

There are too many files, but each file is only a few kb in size.
e.g.:

E:/tiny-vue/examples/sites/demos/pc/app/link-menu/basic-usage-composition-api.vue?vue&type=script&setup=true&lang.jsx
E:/tiny-vue/examples/sites/demos/pc/app/link-menu/basic-usage.vue?vue&type=script&lang.jsx
E:/tiny-vue/examples/sites/demos/pc/app/link-menu/custom-foot-composition-api.vue?vue&type=script&setup=true&lang.jsx

When packaged, the three files above will eventually generate three files.

When the vite-plugin-static-copy plug-in is copied, the ./demos/${env.VITE_APP_MODE}/** path seems to be copied recursively.
eg:

./demos/${env.VITE_APP_MODE}/* seems to be able to copy the entire folder directly.

You can test it on this website: vite-plugin-static-copy

solve

1. @demos

Only one app is needed in the @demos folder, delete all other flat folders, and delete files ending with .spec.ts.
(vite-plugin-static-copy plug-in supports the use of regular rules to exclude files that are not copied, but I have not been successful. I can only remove files in the current directory. It does not take effect on deeper-level sub-files, so it is not used in a production environment. Plug-in, I wrote a js script to manually copy and remove the test files)

2. Chunk merging

It is best to generate only one packaging file for each component and use rollup's manualChunks to process it.
Also relies on subcontracting to third parties.

mengqiuleo · 2024-02-04T17:56:27Z

`need help`

分包后出现错误：

kagol · 2024-02-05T07:12:06Z

examples/sites/CORS

@@ -0,0 +1 @@
+*


@mengqiuleo 需要移除误提交的文件

这个是要提交的，surge 会认为跨域，这个是解决跨域问题的

https://surge.sh/help/enabling-cross-origin-resource-sharing

现在这个vite分包还是有问题的，会出现上面的错误，但是我解决不了

是vite打包循环依赖了，我晚上再处理下

github-actions · 2024-02-05T13:43:46Z

PR preview has been successfully built and deployed to https://tiny-vue-pr-1375.surge.sh.

github-actions · 2024-02-05T14:27:05Z

PR preview has been successfully built and deployed to https://tiny-vue-pr-1375.surge.sh.

mengqiuleo · 2024-02-05T17:51:57Z

这样打包是错误的，打出来的包全是循环引用，可以拿 madge 测一下，全都是，完全不能用

Issues-translate-bot · 2024-02-05T17:52:10Z

Bot detected the issue body's language is not English, translate it automatically.

This is wrong to package

github-actions · 2024-02-06T06:41:13Z

PR preview has been successfully built and deployed to https://tiny-vue-pr-1375.surge.sh.

github-actions · 2024-02-06T06:41:45Z

Deploy PR preview failed.

github-actions · 2024-02-06T07:02:51Z

Deploy PR preview failed.

mengqiuleo · 2024-02-06T07:12:46Z

要不用 vercel preview 吧，目前没有找到好的分包方式

Issues-translate-bot · 2024-02-06T07:12:57Z

Bot detected the issue body's language is not English, translate it automatically.

Why don't you use vercel preview? I haven't found a good subcontracting method yet.

kagol · 2024-02-06T09:17:38Z

要不用 vercel preview 吧，目前没有找到好的分包方式

可以尝试下 vercel

Issues-translate-bot · 2024-02-06T09:17:48Z

Bot detected the issue body's language is not English, translate it automatically.

Why don’t you use vercel preview? There is currently no good subcontracting method.

You can try vercel

mengqiuleo · 2024-02-06T09:21:20Z

@kagol , 麻烦在 vercel 上部署一下吧，我重新 commit 一下

Issues-translate-bot · 2024-02-06T09:21:30Z

Bot detected the issue body's language is not English, translate it automatically.

@kagol, please deploy it on vercel, I will re-commit it

mengqiuleo · 2024-02-06T09:21:40Z

fix(ci): compress build chunks #1375

fix(ci): compress build chunks #1375

Uh oh!

Conversation

mengqiuleo commented Feb 4, 2024

PR

PR Checklist

PR Type

What is the current behavior?

What is the new behavior?

Does this PR introduce a breaking change?

Other information

Uh oh!

github-actions bot commented Feb 4, 2024

Uh oh!

github-actions bot commented Feb 4, 2024

Uh oh!

github-actions bot commented Feb 4, 2024

Uh oh!

github-actions bot commented Feb 4, 2024

Uh oh!

mengqiuleo commented Feb 4, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

vite打包优化：

现状：

解决

1. @demos

2. chunk合并

Uh oh!

Issues-translate-bot commented Feb 4, 2024

vite packaging optimization:

status quo:

solve

1. @demos

2. Chunk merging

Uh oh!

mengqiuleo commented Feb 4, 2024

need help

Uh oh!

kagol Feb 5, 2024

Choose a reason for hiding this comment

Uh oh!

mengqiuleo Feb 5, 2024

Choose a reason for hiding this comment

Uh oh!

mengqiuleo Feb 5, 2024

Choose a reason for hiding this comment

Uh oh!

mengqiuleo Feb 5, 2024

Choose a reason for hiding this comment

Uh oh!

mengqiuleo Feb 5, 2024

Choose a reason for hiding this comment

Uh oh!

github-actions bot commented Feb 5, 2024

Uh oh!

github-actions bot commented Feb 5, 2024

Uh oh!

mengqiuleo commented Feb 5, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Issues-translate-bot commented Feb 5, 2024

Uh oh!

github-actions bot commented Feb 6, 2024

Uh oh!

github-actions bot commented Feb 6, 2024

Uh oh!

github-actions bot commented Feb 6, 2024

Uh oh!

mengqiuleo commented Feb 6, 2024

Uh oh!

Issues-translate-bot commented Feb 6, 2024

Uh oh!

kagol commented Feb 6, 2024

Uh oh!

Issues-translate-bot commented Feb 6, 2024

Uh oh!

mengqiuleo commented Feb 6, 2024

Uh oh!

Issues-translate-bot commented Feb 6, 2024

mengqiuleo commented Feb 4, 2024 •

edited

Loading

1. `@demos`

`need help`

mengqiuleo commented Feb 5, 2024 •

edited

Loading