es6兼容性标签script type=“module“的特性

5,371 阅读1分钟

笔记

<script type="module" src="×××.js"></sceipt>

  • 1: type=“module“的script标签内部默认是严格模式
  • 2: type=“module“的script标签内的变量,是这个script标签的私有变量
  • 3: type=“module“的script标签内的js会延迟执行。
  • 4: type=“module“的script标签通过src属性引入的js代码需要服务端支持cors跨域。
  • 5: type=“module“的script标签只有在支持es6的浏览器中才执行。

<script nomodule src="./target.es6.js"></sceipt>

  • 1: nomodule的script标签只有在不支持es6的浏览器中才执行。

一般我们在性能优化的时候会使用上type=“module“和nomodule的script标签

  • 因为babel7已经支持将我们的目标代码打包为es6和es6。
  • 所以在webpack构建是需要打包出两份目标代码,一份es6,一份es5.
  • 在支持type=“module“的浏览器,引入目标代码为es6的代码。这样就可以减少polyfill代码的引入,减少代码体积
  • 在<script nomodule src="./target.es5.js"></script>的浏览器中,代引入polyfill后的es5代码。