webpack基础--代码分割和懒加载

代码分割和懒加载

内置方法和Loader

require.ensure()

内置方法:require.ensure([dependencies], callback,errorCalback,chunkName) 动态加载代码
参数:
dependencies: 依赖项, 是一个数组, 不会执行
callback: 在这里执行代码
errorCallback: 可省略
chunkName: 打包好的代码块的名称

require.include()

内置方法:require.include(chunkName) 加载第三方的或公共的代码块, 但是不执行, 只是提前加载进来, 等到有引用它的代码块出现时, 可以缩短加载时间.

ES 2015 Loader spec

import() 返回值是promise
import().then() 进行动态加载

webpack import function:import, 通过注释的方式写入参数
import(
/* webpackChunkName: async-chunk-name */
/* webpackMode: lazy */
moduleName
)

代码分割场景:

1. 分离业务代码 和 第三方依赖
2. 分离业务代码 和 业务公共代码 和 第三方依赖
3. 分离首次加载 和访问后加载的代码 (用于首屏加载)

准备页面:
subpageA:

 import './publicModule.js'
 export default 'subpageA'

subpageB:

 import './publicModule.js'
 export default 'subpageB'

publicModule:

export default 'publicModule'

pageA:

 import './subPageA'
 import './subPageB'
 export default 'pageA'

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

###### 分离业务代码 和 业务公共代码 和 第三方依赖
将import 改为 require.ensure() 动态加载;

###### 多入口应用 代码分割和懒加载