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

相关推荐
herogus丶7 分钟前
【Chrome】‘Good助手‘ 扩展程序使用介绍
前端·chrome
独立开阀者_FwtCoder11 分钟前
面试官:为什么在 Vue3 中 ref 变量要用 .value?
前端·javascript·vue.js
NetX行者13 分钟前
基于Vue 3的AI前端框架汇总及工具对比表
前端·vue.js·人工智能·前端框架·开源
独立开阀者_FwtCoder14 分钟前
手握两大前端框架,Vercel 再出手拿下 Nuxt.js,对前端有什么影响?
前端·javascript·vue.js
独立开阀者_FwtCoder14 分钟前
弃用 html2canvas!快 93 倍的截图神器!
前端·javascript·vue.js
weixin_3993806929 分钟前
TongWeb8.0.9.0.3部署后端应用,前端访问后端报405(by sy+lqw)
前端
伍哥的传说1 小时前
H3初识——入门介绍之常用中间件
前端·javascript·react.js·中间件·前端框架·node.js·ecmascript
洛小豆1 小时前
深入理解Pinia:Options API vs Composition API两种Store定义方式完全指南
前端·javascript·vue.js
洛小豆2 小时前
JavaScript 对象属性访问的那些坑:她问我为什么用 result.id 而不是 result['id']?我说我不知道...
前端·javascript·vue.js