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

藏宝库编辑 · 2024-9-20 10:43:44

配景：

必要动态判断情况，引入相应版本的（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 %>"></script> <% } %>然后重启webpack，会发现编译的时间已经写入了，不再是js动态append进来的了
参考：https://github.com/jantimon/html-webpack-plugin/issues/1333
手动革新页面100次，没有出现白屏的bug了
缘故因由分析：
动态创建的标签默认带async，假如关闭了async，会有实验序次的题目

但是假如启用async，则有多个脚本相互依靠的加载序次题目
以是必要手动关闭async，手动开启defer

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

所属分类: 问答交流

新帖推荐: 30日

推荐作品