reactjs - Webpack Code Splitting 'Loading chunk failed' feil filsti

Jeg bruker React + Typescript med Webpack, og jeg prøver å laste noen av mine React-komponenter når de faktisk trengs.

Problemet er at når delen blir forespurt via lazy loading, får jeg følgende feilmelding:

Ufanget feil: Laster del 1 mislyktes. (feil: http://localhost:58988/1.chunk.js) ved HTMLScriptElement.onScriptComplete (bootstrap:114)

Denne chunk er generert vellykket og uten noen feil, det er bare at banen er feil - http://localhost:58988/1.chunk.js og den skulle vært http://localhost:58988/dist/1.chunk.js

Jeg har også prøvd å bruke den nyeste React.lazy for å late laste React-komponenter, men jeg får det samme problemet. Så, finnes det en måte å fortelle kompilatoren hvordan den skal løse disse filstiene på?

Her er noe av koden:

MinKomponent.tsx

import * as React from "react";
import * as ES5Promise from "promise";

export class MyComponent extends React.Component<{}, {}> {
    constructor(props) {
        super(props);
    }

    private readonly onLoadModuleClickHandler = (): void => {
        import("./Button").then((module) => {
            console.log(module);
        });
    }

    render() {
        return (
            <div>
                <input type="button" value="Load another module" onClick={this.onLoadModuleClickHandler}/>
            </div>
        );
    }
}

tsconfig.json

{
  "compilerOptions": {
    "moduleResolution": "node",
    "noImplicitAny": false,
    "noEmitOnError": true,
    "module": "esnext",
    "removeComments": false,
    "sourceMap": false,
    "target": "es5",
    "jsx": "react",
    "noEmit": true,
    "importHelpers": true,
    "lib": ["dom", "es5", "es2015.promise"]
  },
  "exclude": [
    "node_modules",
    "wwwroot"
  ]
}

webpack.config.js

module.exports = {
    entry: {
        "app": "./src/App.tsx"
    },
    output: {
        path: path.resolve(__dirname, 'wwwroot/dist'),
        filename: "[name].bundle.js",
        chunkFilename: "[name].chunk.js"
    },
    module: {
        rules: [
            {
                test: /\.(ts|tsx)?$/,
                use: "awesome-typescript-loader",
                exclude: /node_modules/
            },
            {
                test: /\.(css|less)?$/,
                use: [{
                    loader: "style-loader"
                }, {
                    loader: "css-loader?modules&localIdentName=[local]--[hash:base64:5]"
                }, {
                    loader: "less-loader"
                }]
            },
        ]
    },
    resolve: {
        extensions: [".js", ".jsx", ".ts", ".tsx", ".css", ".less"]
    }
};

Svar #1

Det skjer fordi output.publicPath som standard er /.

Bare oppdater output.publicPath for å peke der du vil at det skal være => /dist/.

Svar #2

Når du distribuerer på nytt, ved gjenoppbygging av app-pakkene må du sørge for IKKE å rydde utdata-mappen med tidligere chunk-filer, fordi brukere som allerede har appen lastet inn, vil prøve å hente tidligere chunk-filer som ikke lenger vil eksistere.

Det beste å gjøre er å ha en app-versjonssporing (ved å bruke AJAX og lese fra database eller dynamisk konfigurasjonsfil) og når appen oppdager en nyere versjon, sende en melding til brukeren om det og be dem laste siden på nytt.

Svar #3

La oss ikke overfikse på dette. Det skjedde bare 5 ganger. Jeg tror at noen har Excalidraw åpen en stund, vi sender ut en ny versjon i mellomtiden, og når de kommer tilbake, prøver de å laste noen lat-chunk og den er ikke lenger der.

Måten vi løser dette på Facebook er at vi beholder de forrige delene på vårt CDN i en uke, og vi tvinger folk til å oppdatere appen hvis pakken er mer enn en uke gammel. På denne måten trenger vi ikke å bekymre oss for veldig gamle versjoner.

Ovennevnte svar er fra vjeux.

Planen min er å lytte etter feil i window.onerror, og deretter be brukeren oppdatere nettleseren.

window.addEventListener('error', e => {
  // prompt user to confirm refresh
  if (/Loading chunk [\d]+ failed/.test(e.message)) {
    window.location.reload();
  }
});

Relaterte artikler