Как я могу удалить css, загруженный тегом script, с моего сайта вместе с удалением этого тега script?

Question

Это странная проблема, которую я нигде не могу найти нигде. Пожалуйста, прочитайте вопрос до того, как пометить его как дубликат.

У меня есть главное приложение React, которое динамически загружает другие реакциимини-приложение. Это выполняется с помощью функции componentDidMount() компонента, добавляющей тег script в конец тела документа с использованием чистого javascript, адрес src тега передает запрос на веб-сервер для возврата одного связанного файла, который является подпрограммойПриложение для загрузки. Когда компонент размонтирован, тег сценария удаляется из тела документа, а div-корень очищается.

Мини-приложение должно загружаться в одном пакете (не нужно вдаваться в это здесь), и я достигаюЭто происходит путем создания приложения реакции с помощью модифицированной функции npm run build, которая работает следующим образом:

"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;

Все это прекрасно работаетединственная проблема, которую я имею здесь, - это то, что css, загруженный через встроенный сценарий реагирования мини-приложения, сохраняется даже после того, как я удалил тег сценария и очистил корень html. Кто-нибудь имеет представление о том, почему это происходит? Я не уверен, что виноват конфиг веб-пакета, кэширование на стороне клиента или любое другое количество возможностей, есть идеи, как это исправить?

Answer 1

В конфигурации вашего веб-пакета вы используете style loader . По умолчанию это добавляет стили в качестве тега в DOM.

Если ваше основное приложение загружает CSS по-разному, как ваши подпрограммы загружают CSS, вы должны просто иметь возможность удалить теги анонимного стиля после выгрузкитег тега.

В противном случае загрузчик стилей позволяет вставлять атрибуты в сгенерированные теги стилей (или действительно загружать стили различными способами). Это должно позволить вам найти стиль под-приложения и убрать его из DOM.