webpack学习第十三步——懒加载和预请求

同步引入

• 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文件上传至打包分析网站进行分析

• webpack官网提供的一些其他打包分析网站

文件拆分优化代码

• 普通写法

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