webpack配合ES6模块提升性能优化

import和export是ES6模块化的内容

我们可以通过以下的方式来实现懒加载

import('xxx.js').then(({default: x1}) => x())

比如下面的例子：

// add.js

function add(a, b) {
    console.log("a + b",2222)
}
export default add

// index.js

document.addEventListener('click', () => {
    import('./add').then(({default: add}) => {
        add()
    })
})

使用webpack打包到html中，可以看到浏览器先加载了初始化的JS文件

当我们点击窗口时 ，才加载我们所需要的add.js，可提升页面加载速度

但是有时候我们需要它预先加载，我们就可以用到webpack的webpackPrefetch（预先拉取：推荐）和webpackPreload（预先加载）

webpackPrefetch会在主要的代码加载完成后，在空闲状态下加载该资源

document.addEventListener('click', () => {
    import(/* webpackPrefetch: true */ './add').then(({default: add}) => {
        add()
    })
})

webpackPreload会和父级chunk并行加载

document.addEventListener('click', () => {
    import(/* webpackPreload: true */ './add').then(({default: add}) => {
        add()
    })
})