coolie-cli 默认会将入口模块及其依赖模块都合并在一个文件里,如果一些模块几乎被全站使用了,那么就可以考虑独立出来,而不需将这些公共模块重复加载。例:

    1. "chunk": [
    2. "./static/js/libs/**/*", ========> 分组0
    3. "./static/js/3rd/**/*", =========> 分组1
    4. [ ================================> 分组2
    5. "./static/js/path1/**/*",
    6. "./static/js/path2/**/*"
    7. ]
    8. ]

    如上,被引用的 libs 模块和 3rd 模块,都会被单独抽出来打包成两个文件,一个文件存放 libs 模块,一个文件存放 3rd 模块。

    模块路径如下

    1. -- static
    2. -- js
    3. -- libs =================================================> 分组0
    4. -- 1.js ====> 被入口模块引用 2 =====> 合并到 chunk0
    5. -- 2.js ====> 被入口模块引用 2 =====> 合并到 chunk0
    6. -- 3.js ====> 被入口模块引用 2 =====> 合并到 chunk0
    7. -- 3rd ===================================================> 分组1
    8. -- 1.js ====> 被入口模块引用 2 =====> 合并到 chunk1
    9. -- 2.js ====> 被入口模块引用 2 =====> 合并到 chunk1
    10. -- 3.js ====> 被入口模块引用 2 =====> 合并到 chunk1
    11. -- path1/2 ===============================================> 分组2
    12. -- path1/1.js ====> 被入口模块引用 0
    13. -- path1/2.js ====> 被入口模块引用 1
    14. -- path1/3.js ====> 被入口模块引用 2 =====> 合并到 chunk2
    15. -- path2/1.js ====> 被入口模块引用 2 =====> 合并到 chunk2
    16. -- path2/2.js ====> 被入口模块引用 3 =====> 合并到 chunk2

    如上:

    • /static/js/path1/1.js被引用0次,static/js/path1/2.js被引用1次,都不会被合并到分块模块内
    • 模块分块按照规则进行分组合并,而不是全部合并在一起
      注意:其中被引用次数,指的是被不同的入口模块引用的次数,如:
    1. app1.js => p1.js => a.js
    2. => p2.js => a.js
    3. app2.js => b.js

    如上,虽然a.jsp1.jsp2.js分别引用了两次,但只被一个入口模块(即:app1.js)引用一次。因此,a.js不会被纳入分块列表中,即使有分块规则满足。

    原文: https://coolie.ydr.me/introduction/module-chunk