Shulou(Shulou.com)06/01 Report--

This article will explain in detail how to solve the Some chunks are larger problems encountered in upgrading the project vite1.0 to 2.0 package. The editor thinks it is very practical, so I share it with you as a reference. I hope you can get something after reading this article.

Encountered a warning while packing the project (if you want to see the result, you can slide to the bottom)

Output file name / static/vendor.9b5698e4.js 806.03kb / brotli: skipped (large chunk)

Some chunks are larger than 500kb after minification. Consider:

Using dynamic import () to code-split the application

Use build.rollupOptions.output.manualChunks to improve chunking: rollup.js

Adjust chunk size limit for this warning via build.chunkSizeWarningLimit.

As some packages depend on the large size of the package, you are prompted to split the configuration.

How to configure segmentation

Follow the prompts to enter rollup.js

When you open it, you will see a pile of English and two small blocks of code.

ManualChunks: {lodash: ['lodash']} manualChunks (id) {if (id.includes (' node_modules')) {return 'vendor';}}

You can see that output.manualChunks is supposed to be in the rollup package configuration.

Module.exports = {build: {rollupOptions: {output: {manualChunks: {lodash: ['lodash']}

If you run the package again, you will find that there will be one more lodash in your package result, but without the large file of the previous vendor, the other files will become larger again.

Output file name / static/lodash.fe9934f4.js 0.23kb / brotli: 0.12kb

Then you return return "vendor" for another one. There seems to be no change except for getting bigger. Try a different return value.

Module.exports = {build: {rollupOptions: {output: {manualChunks (id) {if (id.includes ('node_modules')) {return "wq";}

The result of the package is as follows. It seems that there is an extra css, the size has not changed, and it has become bigger.

Print this id to see what it is, and guess it should be some dependency packages, because it is to see if there is a node_modules.

Module.exports = {build: {rollupOptions: {output: {manualChunks (id) {if (id.includes ('node_modules')) {console.log (id, "=") return "wq";}

It is found that they are all dependent packages, since they can be printed, can I return the name of the package and dry it?

/ node_modules/element-plus/lib/index.esm.js

Let's split the second one directly with "node_modules/".

Module.exports = {build: {rollupOptions: {output: {manualChunks (id) {if (id.includes ('node_modules')) {console.log (id.toString (). Split (' node_modules/') [1]) return "aa" }}}

Then take the first console.log ("value is", id.toString (). Split ('node_modules/') [1] .split (' /') [0] .toString ())

It is best that we just take the split value as the returned value, and we will not report that the packet is too large, and he will put the duplicate under the same name and there will be no repetition.

Module.exports = {build: {rollupOptions: {output: {manualChunks (id) {if (id.includes ('node_modules')) {return id.toString (). Split (' node_modules/') [1] .split ('/') [0] .toString () }}}

The point is at the end: this file is too large, it is not handled in this way, it is just a visual reduction, in fact, he just took the large file apart and divided it into many parts, which had no substantive effect. It was only when I encountered a situation in use at that time that I went to deal with it. If the boss wants to know how to deal with it, you can take a look at this article and click here. This is a way for one of my bosses to communicate and compress the files, which greatly improves the speed of visiting the website.

Add: will generate a large number of 1kb files, but a lot more files, how to pack all the small files together?

Before the file split, although the size has decreased, but the number of files has increased, since rollup can integrate the files, we can split the files, so we can take out the individual large files, and integrate the rest of the files, so that we can put those very small files together, because I have not found the size of each package file. Only by splitting and packing first, you can see which bags are large, and then take these bags out and deal with them separately. Of course, this method certainly won't work. I only provide ideas. If any boss knows that if you get the size of the file, you can comment and tell me, thank you, boss.

ManualChunks (id) {if (id.includes ('node_modules')) {/ / I don't use many other packages here, the biggest one is element-plus. I take it out separately, and the rest return any name, / / compared with no configuration before. The file will only have element-plus and a wq js if (id.toString (). Split ('node_modules/') [1] .split (' /') [0] .files ('element-plus')) {return' element-plus'} else {return'wq '} / / return id.toString () .split (' node_modules/') [1] .split ('/') [0] .toString () }} this is the end of the article on "how to solve the Some chunks are larger problem encountered in upgrading the project vite1.0 to 2.0 package". I hope the above content can be of some help to you, so that you can learn more knowledge. if you think the article is good, please share it for more people to see.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.