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

相关推荐
jiangzhihao05154 小时前
前端自动翻译插件webpack-auto-i18n-plugin的使用
前端·webpack·node.js
软件技术NINI6 小时前
html css网页制作成品——HTML+CSS盐津铺子网页设计(5页)附源码
前端·css·html
mapbar_front7 小时前
面试问题—我的问题问完了,你还有什么想问我的吗?
前端·面试
quweiie7 小时前
thinkphp8+layui多图上传,带删除\排序功能
前端·javascript·layui
李鸿耀7 小时前
React 项目 SVG 图标太难管?用这套自动化方案一键搞定!
前端
闲蛋小超人笑嘻嘻7 小时前
树形结构渲染 + 选择(Vue3 + ElementPlus)
前端·javascript·vue.js
叶梅树8 小时前
从零构建A股量化交易工具:基于Qlib的全栈系统指南
前端·后端·算法
巴博尔8 小时前
uniapp的IOS中首次进入,无网络问题
前端·javascript·ios·uni-app
Asthenia04129 小时前
技术复盘:从一次UAT环境CORS故障看配置冗余的危害与最佳实践
前端
csj509 小时前
前端基础之《React(1)—webpack简介》
前端·react