language-tools icon indicating copy to clipboard operation
language-tools copied to clipboard

feat(build): integrate tree-shaker for improved bundle optimization

Open johnsoncodehk opened this issue 1 year ago • 7 comments

Tree shaking power by https://github.com/KermanX/tree-shaker.

johnsoncodehk avatar Nov 07 '24 10:11 johnsoncodehk

Open in Stackblitz

vue-component-meta

npm i https://pkg.pr.new/vuejs/language-tools/vue-component-meta@4994
vue-component-type-helpers

npm i https://pkg.pr.new/vuejs/language-tools/vue-component-type-helpers@4994
@vue/language-plugin-pug

npm i https://pkg.pr.new/vuejs/language-tools/@vue/language-plugin-pug@4994
@vue/language-core

npm i https://pkg.pr.new/vuejs/language-tools/@vue/language-core@4994
@vue/language-server

npm i https://pkg.pr.new/vuejs/language-tools/@vue/language-server@4994
@vue/language-service

npm i https://pkg.pr.new/vuejs/language-tools/@vue/language-service@4994
vue-tsc

npm i https://pkg.pr.new/vuejs/language-tools/vue-tsc@4994
@vue/typescript-plugin

npm i https://pkg.pr.new/vuejs/language-tools/@vue/typescript-plugin@4994

commit: 2e4324c

pkg-pr-new[bot] avatar Nov 07 '24 10:11 pkg-pr-new[bot]

@KermanX I think this PR is almost successful, but tree-shaker seems to have some template string/regex conversion problems, can you take a look?

johnsoncodehk avatar Dec 18 '24 14:12 johnsoncodehk

@KermanX I think this PR is almost successful, but tree-shaker seems to have some template string/regex conversion problems, can you take a look?

Yes, I've noticed that bug, but I can't immediately solve it because I need to investigate how to escape the template literal in oxc 🥲.

kermanx avatar Dec 18 '24 16:12 kermanx

I've used a workaround to solve the template literal escaping issue.

Currently, this PR is tree-shaking thousands of input files, which may lose many import chances compared to tree-shaking the bundled js.

I found that the server.cjs produced by esbuild will make the tree shaker stuck for a long time. However, tree-shaking works well on the Rollup output in #4998. As a rough estimation, Tree-shaking can finish in about 30s on the Rollup output in #4998, and make the js size about 5% smaller.

kermanx avatar Dec 19 '24 17:12 kermanx

Unfortunately the output file is currently corrupt and still needs to be investigated.

#4998 changes the project dependencies too much, so it's relatively difficult to merge (and I haven't finished reviewing all the changes yet), and if we can successfully merge this PR first, and move on to #4998 in the future, I think there is no harm.

johnsoncodehk avatar Dec 19 '24 17:12 johnsoncodehk

Unfortunately the output file is currently corrupt and still needs to be investigated.

I've fixed another bug. And I can't find more problems myself now.

kermanx avatar Dec 20 '24 09:12 kermanx

I just found that the filter used to be /\.js/, which accepts *.json. And tree-shaker can't parse JSON, which results in an empty output 🥲

Sadly, after this fix, tree-shaker can only make the bundle size less than 0.01 MB smaller. This is quite expected because tree-shaker aims to remove unused code, but individual source modules always don't have useless code themselves. I will work on making tree-shaking the bundled code work.

kermanx avatar Dec 26 '24 13:12 kermanx

Due to the switch to rolldown, this PR is obsolete.

johnsoncodehk avatar May 16 '25 13:05 johnsoncodehk