ES11新特性_动态import---JavaScript_ECMAScript_ES6-ES11新特性工作笔记065

最新推荐文章于 2025-03-07 20:43:57 发布
最新推荐文章于 2025-03-07 20:43:57 发布
阅读量598 收藏
点赞数
CC 4.0 BY-SA版权
分类专栏： 前端UI&后端&分布式
本文为博主原创文章，未经博主 添柴程序猿 允许不得转载 违者追究法律责任。
本文链接：https://blog.youkuaiyun.com/lidew521/article/details/113566530
本文介绍了ES11中的动态import特性，用于解决JavaScript按需导入模块的问题，从而提高页面加载效率。通过示例展示如何使用动态import避免一次性加载大量JS文件，通过Promise的then方法调用导入的函数，实现动态调用和按需加载。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

 然后我们再看一下,es11中提供的这个动态的import

这个是用来解决什么问题?

解决以前我们导入需要的js文件,都是怎么导入,把需要的都一次导入进来对吧,做不到

按需导入,这样会导致一个问题,就是页面的显示效率会下降,因为,页面打开需要加载的js太多了.

 

我们es11提供的这个动态的import就可以解决这个问题,实现按需导入.

可以看到我们这里有个html文件,然后

我们引入app.js,然后type是module

然后在app.js中,我们先获取这个按钮

然后给他添加个click事件

然后我们再写个函数,但是我们从一个新的js文件中写

然后我们暴露这个函数,用export

了解本专栏 订阅专栏 解锁全文 超级会员免费看
ES6新特性_ES6中模块暴露数据语法汇总---JavaScript_ECMAScript_ES6-ES11新特性工作笔记043
添柴程序猿的专栏
01-31 571
上一节说了,在浏览器中使用es6的模块化,来引用js, 上面是之前我们写的这个 m1.js文件 可以看到我们在我们想暴露的,变量或者 函数前面加上了一个 export 关键字 然后我们通过 <script type="module"> import * as m1 from "./src/js/m1.js" </script> 这种方式来引用了,这个m1.js 然后这种向浏览器网页,暴露某个文件变量或者函数的方式,叫做 分别暴露,也就是可以想暴露哪.
ES6新特性_ES6模块化引入NPM包--JavaScript_ECMAScript_ES6-ES11新特性工作笔记046
添柴程序猿的专栏
01-31 581
然后我们再看,如果我们想用es6的语法,来使用jQuery等一些js的框架怎么弄 我们可以利用npm,直接把jQuery导入进来使用就可以了. 首先我们去用npm安装一下jQuery npm i jquery 然后我们可以看到安装完了 然后我们就可以把jquery导入进来,上面这个import 就是,es6语法,引入jquery的方法, 以前我们引入怎么引入,es5中,是 const $=require("jquery"); 这样引入的对吧, 然后我们再去给页面的背景弄.
ES Module 的 import 导入和 import () 动态导入
最新发布
星环
03-07 1325
ES Module 的import导入和import()动态导入为开发者提供了强大的模块管理能力。import的静态特性使得代码的依赖关系更加清晰，便于优化；import()的动态特性则为代码的灵活性和性能优化提供了更多可能。在实际开发中，我们应根据具体的需求选择合适的导入方式，以构建高效、可维护的 JavaScript 应用。
ES11-动态import
hunter_97的博客
04-20 652
在ES6中import只能实现静态导入，也就是我们在使用某一个模块文件的时候，需要在文件头部导入这个模块。如： 而在后期的开发过程当中一些时候我们导入的模块并不一定都会使用到，但是还是需要提前导入，这时候就会导入一个实际没有用到的文件如：import ma from './ma.js' var a = getValue(); // getValue是一个获取数据的函数 if(a >...
ES11 import 动态引入
m0_64436820的博客
08-23 129
ES11 import 动态引入。
es6 动态import 实现按需加载
weixin_42448623的博客
08-14 9620
动态import es6 import 文档 关键字import可以像调用函数一样来动态的导入模块。以这种方式调用，将返回一个 promise import('./hello.js').then(module=>{ // module 就是模块里面导出的对象 }) 示例 index.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <met
【ES11(2020)】Dynamic Import 动态引入
张营的技术博客
05-12 884
按需import提案几年前就已提出，如今终于能进入ES正式规范。这里个人理解成“按需”更为贴切。现代前端打包资源越来越大，打包成几M的JS资源已成常态，而往往前端应用初始化时根本不需要全量加载逻辑资源，为了首屏渲染速度更快，很多时候都是按需加载，比如懒加载图片等。而这些按需执行逻辑资源都体现在某一个事件回调中去加载。 // 点击按钮才去加载ajax模块 const oBtn = document.querySelector('#btn') oBtn.addEventListener('click', ()
ES6新特性_浏览器使用ES6模块化引入模块---JavaScript_ECMAScript_ES6-ES11新特性工作笔记042
添柴程序猿的专栏
01-31 474
然后我们再来看一下在浏览器中怎么用这个 ES6的模块化,来引入模块. 首先我们在同一个文件下写一个js文件,m1.js,里面写个变量,写个 函数 然后如果我们想把,m1.js文件中的 某个变量,或者 函数提供给外界用的话, 直接可以,在前面加上export 就可以了. 然后我们之前引入js文件都是, 上面这样通过src引入 但是现在不用了,我们现在用这个 <script type="module"> import * as m1 from "./...
JavaScript ES6~ES11新特性学习笔记练习文件
05-02
这份“JavaScript ES6~ES11新特性学习笔记练习文件”正是为了帮助开发者系统学习和掌握这些新特性而准备的。以下将详细阐述这些版本中的关键更新： 1. **箭头函数**： 箭头函数提供了简洁的函数定义方式，如 `...
es模块的懒加载和预加载（import动态引入+webpack）
2401_84411822的博客
04-28 872
template: “./src/index.html”, //引用html模板minify:{//压缩html}),],//可以将node_modules中的模块单独打包成一个chunk},很明显test被提前加载了现在假如有一个需求，当我点击按钮，才想加载test.js这时候import动态加载就来啦初始情况为当我点击按钮这就实现了es6动态引入的懒加载，因为其实现了代码分割，并不需要担心会重复加载然后，还有一个东西叫预加载webpackPrefetch。
ES11新增的这9个新特性，你都掌握了吗？
Yvette Lau的专栏
10-14 660
ECMAScript 2020 是 ECMAScript 语言规范的第11版。自1997年出版第一版以来，ECMAScript 已发展成为世界上使用最广泛的通用编程语言之一。ES2020...
（28）es6——es11新增动态import()
浪头的博客
04-25 1078
文章结构动态import是用来干嘛的 动态import是用来干嘛的 // 以前的静态引入，一股脑的引入，不管是不是现在立马要用都直接引入，影响性能 // import * as obj from './a.js'; // console.log(obj.a); a.js export let a = 1; // 当我们需要的时候再执行import()动态引入 // 动态引入import函数执行之后返回一个promise对象 import('./a.js').then(module => { co
ES11 新增方法：Dynamic Import()、BigInt、globalThis、可选链（?.）、空值合并运算符
taoqidejingling的博客
02-18 883
Dynamic Import() 动态导入、BigInt 表示任意精度的整数、globalThis 全局作用域中的 this 、可选链 Optional chaining（?.）、空值合并运算符（??）
Vue项目中提示JSHint: import is only available in ES6 (use esversion: 6)解决
go
06-29 2854
webStorm新建了一个vue项目后,在main.js导入Element-UI中总是红色波浪提示错误,如下图: 意思大概是:JSHint: import只在ES6中可用(使用 esversion: 6),尝试捣鼓可以通过添加: /* jshint esversion: 6 */ 消除报错提示 注意:页面本身带的注释文字不能删除,不然会报错 ...
ES2020的新特性：String 的 matchAll 方法、动态导入语句 import()等
web前端开发
05-18 499
Ecma标准定义了ECMAScript 2020语言。它是ECMAScript语言规范的第11版。自从1997年第一版出版以来，ECMAScript已经发展成为世界上使用最广泛的通用编程语...
JavaScript——ES11新特性
iFulling的博客
03-21 1323
ES11 新特性一、私有属性二、Promise 扩展三、字符串扩展四、可选链操作符五、动态 import 加载六、BigInt1. 定义大整型2. 大数值运算七、globalthis 一、私有属性 ES10 在类属性前面加 # 表示私有属性，并且需要提前声明，私有属性只有在内部才能调用。 class Person { #age; #weight; constructor(name, age, weight) { this.name = name; th
es6动态模块import()
qq_37312180的博客
03-11 3584
import命令会被 JavaScript 引擎静态分析，先于模块内的其他语句执行（import命令叫做“连接” binding 其实更合适）。上面代码中，引擎处理import语句是在编译时，这时不会去分析或执行if语句，所以import语句放在if代码块之中毫无意义，因此会报句法错误，而不是执行时错误。也就是说，import和export命令只能在模块的顶层，不能在代码块之中（比如，在if代码块之中，或在函数之中）。这样的设计，固然有利于编译器提高效率，但也导致无法在运行时加载模块。
解决VS Code中使用ES6语法出现的'XXX' is only available in ES6 (use 'esversion: 6')
你的指尖，有改变世界的力量。
04-15 2528
在VS Code中使用ES6语法时出现下面的问题： 'XXX' is only available in ES6 (use 'esversion: 6') 解决方法： 在页面上加上 /* jshint esversion: 6 */ 参考：https://www.donovanbrown.com/post/Enabling-jshint-es6-support-in-VS-Code 第一种方...
[jshint] 'import' is only available in ES6 (use 'esversion: 6'). (W119) 提示import等ES6语法的jshint错误的，在代码...
dibengshao7358的博客
12-28 1961
官方下载了vue的简单项目，用vscode打开main.js，代码前出现黄点，js报错了 把鼠标移至import的波浪线上，出现提示：W119 - ‘import’is only available in ES6(use 'esversion: 6') .意思是import属于ES6的语法，当前页面不能用。 在页面上加上 /* jshint esversion: 6 */ ...
ES6+新特性学习笔记与ES2016至ES2020更新概览
在探讨ES6（ECMAScript 2015）以及后续版本ES2016、ES2017、ES2018、ES2019和ES2020等的新特性和改进时，本学习笔记详细记录了ECMAScript标准的演进过程以及其中包含的重要特性。ES6是JavaScript开发中一个重要的...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

添柴程序猿

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值