webpack 代码分割和懒加载

代码分割和懒加载

        是一个很重要的特性，对代码的切分，便于用户的更短的时间里看到自己的页面。使用户在下载代码是只需要下载所需要的部分，避免用户下载带宽，以及提高下载速度。

一、webpack methods

    1.require.ensure

        []:dependencies

        callback

        errorCallback

        chunkName

    2.require.include

    只接受一个参数，可以将它的模块引入进来，但是不执行。

    作用：当两个子模块中同时依赖一个第三方模块时，就可以将第三个模块放置到父模块中，这样父模块中已经有了第三方模块，就直接引用，不再加载。

二、ES 2015 Loader spec定义动态import

    System.import() -> import()

    import() -> Promise

    import().then()

    webpack import function

    import(

    /* webpackChunkName:asyc-chunk-name*/

    /* webpackMode:lazy */

    modulename

    )

代码分割

    分离业务 和 第三方依赖

    分离业务代码 和 业务公共代码 和 第三方依赖

    分离首次加载 和访问后加载的代码