同步引入
- 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,这就是懒加载
- 优化语法,使用异步函数
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默认对异步import进行代码分割,是因为它默认异步引入使用懒加载,性能会优化
打包分析
- 修改打包命令生成文件便于分析
"scripts": {
// 打包的profile生成一个state.json文件
"dev": "webpack --profile --json>states.json --config ./config/webpack.dev.js",
...
}
- 生成的state.json文件
- 将state.json文件上传至打包分析网站进行分析
文件拆分优化代码
- 普通写法
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的内容
Prefetch 预请求
- 核心代码加载完成后去加载
- 修改index.js
import _ from 'lodash'
// 引入lodash并将splitChunks改为async。这样main.js会更大,效果更明显
document.addEventListener('click',() => {
// 加上webpack预请求注解
import(/* webpackPrefetch: true */'./handleClick.js').then(({default: func}) => {
func()
})
})
- 加载完main.js不需要点击,会自动加载handleClick
网友评论