分片

    随着项目开发过程中越来越大,我们的代码体积也会越来越大,而将所有的脚本都打包到同一个JS文件中显然会带来性能方面的问题(无法并发,首次加载时间过长等)。

    webpack也提供了代码分片机制,使我们能够将代码拆分后进行异步加载。

    要使用webpack的分片功能,首先需要定义“分割点”,即代码从哪里分割成两个文件。

    使用:

    使用AMD的动态require

    上面的例子中,和module-b就会被分割到独立的文件中去,而不会和入口文件打包在同一个文件中。

    example1中使用了和AMD动态require两种方式,来建立分割点,代码在此处被分片。

    打包后的代码:

    • 1.bundle.js -> b.js
    • 2.bundle.js -> c.js

    多入口

    多入口的情况下:

    • 入口2 bundle.main2.js -> main2.js + a.js
    • 1.bundle.1.js -> b.js

    可见公共代码a.js并没有被提取出来。