同步引入
- index.js
import _ from 'lodash'
document.addEventListener('click',() => {
var element = document.createElement('div')
element.innerHTML =_.join(['a','b','c'],'***')
document.body.appendChild(element)
})
-
打開頁面時就會引入lodash
異步引入可以懶加載
- index.js
function getComponent() {
return import(/* webpackChunkName:'lodash' */'lodash').then(({default: _}) => {
var element = document.createElement('div')
element.innerHTML =_.join(['a','b','c'],'***')
return element
})
}
document.addEventListener('click',() => {
getComponent().then(element => document.body.appendChild(element))
})
- 點擊時才去請求異步引入的lodash抬闷,這就是懶加載
- 優(yōu)化語法,使用異步函數(shù)
async function getComponent() {
const {default: _} = await import(/* webpackChunkName:'lodash' */'lodash')
var element = document.createElement('div')
element.innerHTML =_.join(['a','b','c'],'***')
return element
}
document.addEventListener('click',() => {
getComponent().then(element => document.body.appendChild(element))
})
所以webpack的splitChunks默認(rèn)對異步import進(jìn)行代碼分割,是因為它默認(rèn)異步引入使用懶加載针饥,性能會優(yōu)化
打包分析
- 修改打包命令生成文件便于分析
"scripts": {
// 打包的profile生成一個state.json文件
"dev": "webpack --profile --json>states.json --config ./config/webpack.dev.js",
...
}
- 生成的state.json文件
- 將state.json文件上傳至打包分析網(wǎng)站進(jìn)行分析
文件拆分優(yōu)化代碼
- 普通寫法
document.addEventListener('click',() =>{
var element = document.createElement('div')
element.innerHTML ='dingding'
document.body.appendChild(element)
})
-
將異步操作拆分
- 新建handleClick.js文件
function handleClick() { var element = document.createElement('div') element.innerHTML ='dingding' document.body.appendChild(element) } export default handleClick
- 修改index.js
document.addEventListener('click',() => { import('./handleClick.js').then(({default: func}) => { func() }) })
- 點擊時請求handleClick的內(nèi)容
Prefetch 預(yù)請求
- 核心代碼加載完成后去加載
- 修改index.js
import _ from 'lodash'
// 引入lodash并將splitChunks改為async。這樣main.js會更大察滑,效果更明顯
document.addEventListener('click',() => {
// 加上webpack預(yù)請求注解
import(/* webpackPrefetch: true */'./handleClick.js').then(({default: func}) => {
func()
})
})
- 加載完main.js不需要點擊打厘,會自動加載handleClick