动态引入script标签的改进方案

简介: 动态引入script标签的改进方案

背景:
需要动态判断环境,引入相应版本的(dev, prod的)react,react-dom

之前写的通过js去创建一个script标签,再append到head里,这个方案偶尔能出现react或者react-dom没加载到的问题,明明看network已经加载了,但是就是报ReactDOM is not defined 的bug,又或者是各种依赖ReactDOM的api报undefined错,多刷新几次偶尔能复现,导致白屏

解决:
发现如果手动写死script标签在head里,而不是js append进去,反而没有bug。但是现在需要判断环境,就不能写死

用的是webpack编译,用了一个html-webpack-plugin的插件,这个插件里面可以配置模板

plugins: [
    new HtmlWebpackPlugin({
   
   
      template: './index.html',
      cdn: {
   
   
        js: process.env.NODE_ENV === 'production' ? [
          'cdn1.min.js',
          'cdn2.min.js'
          // ... 后续的production的cdn都可以写上
        ]: [
          'cdn1.dev.js',
          'cdn2.dev.js'
          // ... 后续的dev的cdn都可以写上
        ]
      },
    })
]

按照这个样子写了后,需要在index.html上写模板,在html的head上加入

<% for (var i in htmlWebpackPlugin.options.cdn&&htmlWebpackPlugin.options.cdn.js) {
   
    %>
      <script src="<%= htmlWebpackPlugin.options.cdn.js[i] %>"></script>
    <% } %>

然后重启webpack,会发现编译的时候已经写入了,不再是js动态append进来的了

参考:https://github.com/jantimon/html-webpack-plugin/issues/1333

手动刷新页面100次,没有出现白屏的bug了

原因分析:
动态创建的标签默认带async,如果关闭了async,会有执行顺序的问题

image.png

但是如果启用async,则有多个脚本相互依赖的加载顺序问题
所以需要手动关闭async,手动开启defer

相关实践学习
Serverless极速搭建Hexo博客
本场景介绍如何使用阿里云函数计算服务命令行工具快速搭建一个Hexo博客。
相关文章
|
XML 前端开发 数据格式
CSS引入方式这么多是什么优先级?
CSS引入方式这么多是什么优先级?
71 0
|
23天前
|
前端开发 JavaScript
【前端web入门第三天】01 css定义和引入方式 四种标签选择器
本文档详细介绍了CSS的基础知识及其应用。内容涵盖了CSS的定义、CSS在HTML中的引入方式,包括内部样式表、外部样式表及行内样式表的使用场景与方法。此外,还深入解析了不同种类的选择器:标签选择器、类选择器、ID选择器以及通配符选择器的功能与应用场景,并提供了实例帮助理解。最后,通过具体的新属性示例,指导如何使用这些选择器来实现基本的盒子绘制。适合初学者系统学习CSS。
35 15
|
12月前
|
移动开发 前端开发 HTML5
|
前端开发
link标签的好处
link标签的好处
|
前端开发 UED 开发者
CSS3新增特性
CSS3是CSS技术的最新版本,相比CSS2增加了许多新的特性,以下是CSS3新增的一些特性:
|
网络协议 JavaScript 前端开发
<link>标签的几个用法,帮助提高页面性能
<link>标签的几个用法,帮助提高页面性能
463 0
<link>标签的几个用法,帮助提高页面性能
|
网络架构
【Node.js+koa--后端管理系统】设计标签创建、查询、接口 | 标签绑定到动态
【Node.js+koa--后端管理系统】设计标签创建、查询、接口 | 标签绑定到动态
164 0
【Node.js+koa--后端管理系统】设计标签创建、查询、接口 | 标签绑定到动态
|
JavaScript
动态关系图(html,直接可以单独html运行),方便集成项目
动态关系图(html,直接可以单独html运行),方便集成项目
146 0
动态关系图(html,直接可以单独html运行),方便集成项目
|
JavaScript
1、引入Vue项目(直接引入、创建步骤、绑定文本/属性/方法)
1、引入Vue项目(直接引入、创建步骤、绑定文本/属性/方法)
149 0