webpack 性能优化（6）懒加载

懒加载

实现代码的按需加载

使用场景

index.js 中点击 button ,动态加载 source.js 的内容，读取内容并打印

Javascript

// index.js
let button = document.createElement('button')
button.innerHTML = 'hello'
button.addEventListener('click',()=>{
  // es6 草案中的语法 jsonp实现动态加载文件
  import('./source.js').then(data => {
    console.log(data.default)
  })
})
document.body.appendChild(button)

Javascript

// source.js
export default 'wangyi'

es6 import 可以实现按需加载，并返回一个 promise，回调中可以拿到加载的数据；vue , react 的懒加载也是这个原理

打包后生成 index.js 和 0.js（用来实现按需加载，JSONP 原理）