如何从网站上删除加载了脚本标签的CSS,以及如何删除该脚本标签?

詹姆斯·莫里森

这是一个奇怪的特定问题,我无法在任何地方找到任何信息。

我有一个主要的React应用程序,可以动态加载其他React微型应用程序。它通过组件的componentDidMount()功能执行此操作,使用纯JavaScript将script标记添加到文档主体的末尾,该标记的src地址代理请求到Web服务器,以返回单个捆绑文件,该捆绑文件是其子应用程序。加载。卸载组件后,将从文档正文中删除脚本标签,并且div根被清空。

迷你应用程序需要可装入一个捆绑包中(无需在此处进行介绍),我可以通过npm run build运行如下所示的修改函数来构建react应用程序来实现此目的

"scripts": {
    "build": "npm run build:sass && npm run build:react && npm run build:bundle",
    "build:react": "react-scripts build",
    "build:bundle": "webpack --config webpack.config.js",
    "build:sass": "node-sass --precision=5 --indent-type=space --output-style=nested --indent-width=2 src/styles/Site.scss src/styles/Site.css"
  }

该命令的捆绑包部分使用下面的webpack.config.js文件;

const path = require("path")
const UglifyJsPlugin = require("uglifyjs-webpack-plugin")
const glob = require("glob")

module.exports = {
  entry: {
    "bundle.js": glob.sync("build/static/?(js|css)/*.?(js|css)").map(f => path.resolve(__dirname, f)),
  },
  output: {
    filename: "build/bundle.min.js"
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        use: ["style-loader", "css-loader"],
      },
    ],
  },
  plugins: [new UglifyJsPlugin()],
}

反过来,这会产生一个bundle.min.js文件,其中包含微型应用程序中的所有脚本,node_modules和css,主应用程序通过以下组件加载该脚本。

export class MyComponent extends React.PureComponent<Props, object> {

    componentDidMount() {
        const script = document.createElement("script");
        script.src = "myScriptSrc";
        script.async = true;
        script.id = this.AppIdToScriptId();
        document.body.appendChild(script);
    }

    componentWillUnmount() {
        document.getElementById("miniAppRoot").innerHTML = "";
        if (this.props.app) {
            document.getElementById(this.AppIdToScriptId()).remove();
        }
    }

    AppIdToScriptId = () => "d" + this.props.App.Id.replace("-", "");

    public render() {
        return (<div id="miniAppRoot" ></div>);
    }
}

export default MyComponent;

这一切都很好,我唯一遇到的问题是即使我删除了脚本标记并清空了html根之后,通过react微型应用程序捆绑脚本加载的css仍然存在。有谁知道为什么会这样吗?我不确定webpack配置是应归咎于客户端缓存还是其他可能性,如何解决此问题的任何想法?

涂抹202

在您的webpack配置中,您正在使用样式加载器默认情况下,这是将样式添加为dom中的标签。

如果您的主应用程序加载CSS的方式与子应用程序加载CSS的方式不同,则您应该能够在卸载脚本标签后删除匿名样式标签。

否则,样式加载器确实允许您将属性注入到生成的样式标签中(或实际上以不同的方式加载样式)。那应该允许您找到子应用程序样式并将其从DOM中删除。

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章