javascript - How to divide the packaging granularity of CSS and JS more reasonably

Question

my thoughts:

1. 要引入的核心依赖和库全部打包成一个
2. 每个组件独有的部分打包成一个
3. 共享的打包成一个

But this seems to be too fine-grained, and there are still a lot of requests. I would like to ask everyone how they usually do it.

Answer 1

There are no absolute rules, the same applies to style files and JS files. Consider the following points
1. Packaging is from the perspective of project modules. The code of a module is packaged together, and the public parts are packaged together
2. The size of the packaged file must be considered. If it is too large, it is not conducive to file requests. It needs to be carefully considered. and package them separately. If there are many reference dependencies, 2-3M packaged together is obviously too large. 3. At the same time, you must also consider the number of packaged files. Too many files will also slow down the loading speed, but this is generally not a big problem. , there will not be too many packages after packaging
4. If it is lazy loading, then it will not have much impact if the packaging is too detailed, just manage each file well

My approach is to pack each module into one package for large projects, and separate the common parts separately. The number of files loaded at a time is thirty-four to forty-fifty. For small projects, I simply package them together, and try to control the compressed file size within 500 or 600K.