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文件)))

相关推荐
uhakadotcom28 分钟前
Astro 框架:快速构建内容驱动型网站的利器
前端·javascript·面试
uhakadotcom32 分钟前
了解Nest.js和Next.js:如何选择合适的框架
前端·javascript·面试
uhakadotcom34 分钟前
React与Next.js:基础知识及应用场景
前端·面试·github
uhakadotcom43 分钟前
Remix 框架:性能与易用性的完美结合
前端·javascript·面试
uhakadotcom1 小时前
Node.js 包管理器:npm vs pnpm
前端·javascript·面试
LaoZhangAI2 小时前
2025最全GPT-4o图像生成API指南:官方接口配置+15个实用提示词【保姆级教程】
前端
ONE_Gua2 小时前
chromium魔改——CDP(Chrome DevTools Protocol)检测01
前端·后端·爬虫
LaoZhangAI2 小时前
2025最全Cherry Studio使用MCP指南:8种强大工具配置方法与实战案例
前端
咖啡教室2 小时前
前端开发日常工作每日记录笔记(2019至2024合集)
前端·javascript
溪饱鱼2 小时前
Nuxt3能上生产吗?
前端