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

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

尽管 import() 语法是在 ES2020 标准中正式引入的,但它在早期就已经被一些工具和库(如 Webpack)所支持,并且被用作实现代码分割和懒加载的方式。

相比import ... from ...,import() 是动态导入用来在运行时按需加载和执行模块,import ... from ... 是静态导入,它在编译时确定需要哪些模块。

c 复制代码
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)
c 复制代码
src/other.js
setTimeout(() => {
    console.log('我是other,我执行了')
}, 1000);
c 复制代码
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文件)))

相关推荐
觅_3 分钟前
Node.js 的线程模型
node.js
雪碧聊技术1 小时前
深入解析Vue中v-model的双向绑定实现原理
前端·javascript·vue.js·v-model
快起来别睡了1 小时前
手写 Ajax 与 Promise:从底层原理到实际应用
前端
打不着的大喇叭2 小时前
uniapp的光标跟随和打字机效果
前端·javascript·uni-app
无我Code2 小时前
2025----前端个人年中总结
前端·年终总结·创业
程序猿阿伟2 小时前
《前端路由重构:解锁多语言交互的底层逻辑》
前端·重构
Sun_light2 小时前
6个你必须掌握的「React Hooks」实用技巧✨
前端·javascript·react.js
爱学习的茄子2 小时前
深度解析JavaScript中的call方法实现:从原理到手写实现的完整指南
前端·javascript·面试
莫空00002 小时前
Vue组件通信方式详解
前端·面试
呆呆的心2 小时前
揭秘 CSS 伪元素:不用加标签也能玩转出花的界面技巧 ✨
前端·css·html