Devtool ist nicht erforderlich

Ich habe vor einigen Monaten an einem Frontend-Projekt gearbeitet. Bei dem Projekt handelte es sich um ein Microfrontend, das in ein Legacy-Dashboard integriert werden sollte.

Der Grund für den Microfrontend-Ansatz war die Reduzierung der Komplexität auf dem Dashboard. Ich war begeistert von dieser Herausforderung und habe mich darauf gestürzt.

Ich richte das Microfrontend mit Webpack, React und Typescript ein. Ich habe Chakra UI als CSS-IN-JS-Framework verwendet, Axios für die API-Integration und alles hat gut funktioniert. Die Buildgröße des Projekts betrug jedoch etwa 14 MB. Für ein Mikrofrontend war das lächerlich groß. Dies führte zu einer sehr langsamen Seitenreaktion im Dashboard, in das es integriert war. Also wurde ich vor eine neue Herausforderung gestellt, den Build zu optimieren.

Ich dachte, der Build sei so groß, weil ich für das Styling ein CSS-IN-JS-Framework verwendet habe. Also habe ich die gesamte Codebasis von Chakra-UI auf Sass umgestaltet. Ratet mal, die Build-Größe ist von 14 MB auf etwa 21 MB gestiegen?

Da wusste ich, dass es nicht um die CSS-Bibliothek oder den Code geht, sondern um die Webpack-Konfiguration. Ich habe viele Versuche und Irrtümer mit der Webpack-Konfiguration gestartet. Dann stellte ich fest, dass die Build-Größe von 14 MB auf etwa 600 KB anstieg, als ich das Devtool entfernte. Dann habe ich die Webpack-Dokumentation zu Devtool überprüft. Mir wurde klar, dass es keine Pflicht ist. Weitere Infos hier:.

Hier ist ein kleiner Einblick in meine Webpack-Konfiguration

module.exports = merge(common, {
  name: "client",
  mode: process.env.NODE_ENV,
  devtool: "eval-source-map", //remove devtool
  entry: {
    "microfrontend": "./src/bootstrap.tsx",
  },
  output: {
    path: path.resolve(__dirname, "../dist"),
    filename: "[name]_[hash].js",
    pathinfo: false,
    publicPath: 'http://localhost:6001/',
  },
  ...
}

Zusammenfassend lässt sich sagen, dass die Lösung für das Problem, auf das ich gestoßen bin, durch einfaches Entfernen einer Codezeile behoben wurde.

module.exports = merge(common, {
  name: "client",
  mode: process.env.NODE_ENV,
  entry: {
    "microfrontend": "./src/bootstrap.tsx",
  },
  output: {
    path: path.resolve(__dirname, "../dist"),
    filename: "[name]_[hash].js",
    pathinfo: false,
    publicPath: 'http://localhost:6001/',
  },
  ...
}

Danke fürs Lesen. Ich hoffe, Sie finden das hilfreich.

Das obige ist der detaillierte Inhalt vonDevtool ist nicht erforderlich. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!