# 代码懒加载
1. 动态import使用最多的一个场景是懒加载（比如路由懒加载）
封装一个 component.js，返回个 component对象
我们可以点击按钮时，加载这个对象
## 示例
1. 新建 element.js
```
const element = document.createElement('div')
element.innerHTML = 'Hello Element'
export default element
```
2. 入口文件
```
const button = document.createElement('button')
button.innerText = '加载'
button.addEventListener('click', () => {
import(/* webpackChunkName: 'element' */ './element.js').then(res => {
document.body.appendChild(res.default)
})
})
document.body.appendChild(button)
```
此时，运行，打开控制台，点击 ‘加载’按钮，就可以看到，‘element.bundle.js’ 被加载。
## 上面懒加载的缺点：
1. 点击才开始加载js文件
2. 加载完再解析
## webpack 预加载（空闲时，加载）———— prefetch -> 魔法注释（magic comments)
1. 改造上面的入口文件代码
```
const button = document.createElement('button')
button.innerText = '加载'
button.addEventListener('click', () => {
import(
/* webpackChunkName: 'element' */
/* webpackPrefetch: true */
'./element.js'
).then(res => {
document.body.appendChild(res.default)
})
})
document.body.appendChild(button)
```
## webpack 预获取 ———— preLoad -> 魔法注释（magic comments)，没有 prefetch用的多
1. preLoad 跟随父模块一起下载的
```
const button = document.createElement('button')
button.innerText = '加载'
button.addEventListener('click', () => {
import(
/* webpackChunkName: 'element' */
/* webpackLoad: true */
'./element.js'
).then(res => {
document.body.appendChild(res.default)
})
})
document.body.appendChild(button)
```
# optimization.runtimeChunk 配置
1. 它主要决定要不要将运行时的代码单独抽离到一个chunk文件里
2. 默认，通过import等导入的模块等代码，都是打包到主模块（入口文件）里如 main.bundle.js中的，这里就是决定这些模块是否单独抽离出来
## webpack.config.js 中配置
```
optimization: {
// true/multiple 抽离到多个文件
// single 抽离到一个文件
// 不配置，不抽离
// object.name 设置抽离的名字
// runtimeChunk: {
// name: 'runtime-5imoban' // 这个名字最终会拼接到：output.filename 中
// }
runtimeChunk: {
name: function(entrypoint) {
return `5imoban-${entrypoint.name}` // 最终打包的名字为： 5imoban-入口文件名.bundle.js
}
}
},
```