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

This article mainly introduces the "vite2 packaging when the vendor-xxx.js file is too large how to solve" related knowledge, editor through the actual case to show you the operation process, the method of operation is simple and fast, practical, hope that this "vite2 packaging when the vendor-xxx.js file is too large how to solve" article can help you solve the problem.

Vite2 is a very useful tool, but as the code grows, the vendor-xxxxxx.js file gets bigger and bigger when it is packaged, which is depressing.

Encountered a warning when packing

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 dependent packages are too large when packing, you are prompted to split the configuration.

Https://rollupjs.org/guide/en/#outputmanualchunks

Looking for a solution

(well, the official website is in English, so I can't understand it.)

So I looked for it on the Internet and found a solution. Https://www.yisu.com/article/241486.htm

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

After a try, it is true that it can be divided into multiple files, but here comes the problem again. the divided files are large and small, and large files are acceptable, but a bunch of k small files are annoying, so I think again and find that they can be like this.

Build: {sourcemap: true, outDir: 'distp', / / specify the output path assetsDir:' static/img/' / / specify the storage path to generate static resources rollupOptions: {output: {manualChunks (id) {if (id.includes ('node_modules')) {const arr = id.toString () .split (' node_modules/') [1] .split ('/') switch (arr [0]) { Case'@ kangc': case'@ naturefw': case'@ popperjs': case'@ vue': case 'axios': case' element-plus': return'_'+ arr [0] break default: Return'_ _ vendor' break} ChunkFileNames: 'static/js1/ [name]-[hash] .js', entryFileNames: 'static/js2/ [name]-[hash] .js', assetFileNames: 'static/ [ext] / [name]-[hash]. [ext]'}, brotliSize: false, / / No statistics target: 'esnext', minify:' esbuild' / / obfuscator After terser is built, the file size is smaller}}.

Separate packages according to modules, large modules packaged independently, small modules combined and packaged, so that there will not be a large pile of small files.

Supplement

After repeated attempts, it has been found that @ kangc (@ kangc/v-md-editor), the editor of md, cannot be packaged separately and will report an error.

And axios can not be packed separately, it will report an error.

If (id.includes ('node_modules')) {const arr = id.toString () .split (' node_modules/') [1] .split ('/') switch (arr [0]) {case'@ naturefw': / / Natural Framework case'@ popperjs': case'@ vue': Case 'element-plus': / / UI library case' @ element-plus': / / icon return'_'+ arr [0] break default: return'_ _ vendor' break}}

These can be packed separately, and we'll talk about the others when we encounter them.

This is the end of the content about "how to solve the problem that the vendor-xxx.js file is too large when vite2 is packaged". Thank you for your reading. If you want to know more about the industry, you can follow the industry information channel. The editor will update different knowledge points for you every day.

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.