webpack优化构建体积示例-按需加载：代码分割 懒加载

按需加载（也称为代码分割或懒加载），基于import()实现的。

import()是动态导入语法允许你在运行时动态地加载和执行 JavaScript 模块，import() 返回一个 Promise，该 Promise 解析为导入的模块对象，这使得你可以按需加载代码，实现代码分割和懒加载。

尽管 import() 语法是在 ES2020 标准中正式引入的，但它在早期就已经被一些工具和库（如 Webpack）所支持，并且被用作实现代码分割和懒加载的方式。
相比import … from …，import() 是动态导入用来在运行时按需加载和执行模块，import … from … 是静态导入，它在编译时确定需要哪些模块。

src/index.js
const button = document.createElement('button')
button.style.width = '200px'
button.style.height = '200px'
button.innerText = '动态加载js'
button.addEventListener('click', () => {
    import('./other.js').then(res => {
        console.log('加载了js')
    })
})
document.body.appendChild(button)

src/other.js
setTimeout(() => {
    console.log('我是other，我执行了')
}, 1000);

webpack.config.js
const HtmlWebpackPlugin = require('html-webpack-plugin')

module.exports = {
    entry: './src/index.js',
    output: {
        filename: 'main.js',
    },
    plugins: [
      new HtmlWebpackPlugin({
        template: './index.html',
      }),
    ],
    mode: 'production',
}

加载前

点击后

可以看到点击后加载了对应的js资源

关于切换路由

按需加载切换页面时， import()加载对应的js，而销毁旧的js是由spa来完成的（如vue react。监控路由变化然后进行组件卸载(实例销毁移除监听移除定时器) 、dom清理(通过removeChild移除组件的根元素)、内存回收(垃圾回收机制会移除为引用的元素、缓存和重新加载(虽然旧的组件实例和对象会销毁，但是浏览器会缓存加载过的js文件))）