同步引入

• 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)行分析

• webpack官網(wǎng)提供的一些其他打包分析網(wǎng)站

文件拆分優(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