动态引入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博客。
相关文章
|
1月前
|
JavaScript 前端开发 Go
|
1月前
|
前端开发 JavaScript
css的引入方式和区别
css的引入方式和区别
34 0
|
6月前
|
JavaScript 前端开发 API
jQuery 3.0 新增了哪些特性?(jQuery 3 所引入的那些最重要的变化)
jQuery 3.0 新增了哪些特性?(jQuery 3 所引入的那些最重要的变化)
83 0
|
移动开发 前端开发 HTML5
|
前端开发 UED 开发者
CSS3新增特性
CSS3是CSS技术的最新版本,相比CSS2增加了许多新的特性,以下是CSS3新增的一些特性:
|
网络架构
【Node.js+koa--后端管理系统】设计标签创建、查询、接口 | 标签绑定到动态
【Node.js+koa--后端管理系统】设计标签创建、查询、接口 | 标签绑定到动态
174 0
【Node.js+koa--后端管理系统】设计标签创建、查询、接口 | 标签绑定到动态
|
JavaScript
1、引入Vue项目(直接引入、创建步骤、绑定文本/属性/方法)
1、引入Vue项目(直接引入、创建步骤、绑定文本/属性/方法)
153 0
|
前端开发
4、引入css方法(内嵌、嵌入、外部)
4、引入css方法(内嵌、嵌入、外部)
102 0
|
JSON JavaScript 前端开发
《JS原理、方法与实践》- ES6原有对象新增属性
《JS原理、方法与实践》- ES6原有对象新增属性
216 0
|
前端开发 JavaScript
jquery动态待装入 HTML 网页内容和动态引入css、动态引入js
jquery动态待装入 HTML 网页内容和动态引入css、动态引入js
335 0