웹 팩 코드 분할 '청크 로드 실패' 오류 잘못된 파일 경로

웹 팩 코드 분할 '청크 로드 실패' 오류 잘못된 파일 경로

웹팩과 함께 리액션+타입스크립트를 사용하고 있는데, 리액션 컴포넌트가 실제로 필요할 때 로딩하려고 한다.

문제는 느리게 로드하여 청크를 요청하면 다음과 같은 오류가 발생한다는 것이다.

검색되지 않은 오류: 청크 1을 로드하지 못함(오류: http://localhost:58988/1.chunk.js) HTMLScriptElement.onScriptComplete(부트스트랩:114)

이 청크는 성공적으로 생성되었고 오류 없이 경로가 잘못되었을 뿐이다.http://localhost:58988/1.chunk.js그리고 그것은 그래야 한다.http://localhost:58988/dist/1.chunk.js

최신 제품도 사용해 봤고React.lazy부하가 느리게 반응하는 부품에 대해서 말이야 하지만 난 같은 문제를 겪고 있어그렇다면 컴파일러에게 이러한 파일 경로를 해결하는 방법을 알려줄 방법이 있는가?

암호는 다음과 같다.

MyComponent.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"]
    }
};

그런 일이 생기는 것이다.output.publicPath기본적으로/.

업데이트만output.publicPath원하는 곳을 가리키기 위해 =>/dist/.

앱 번들을 다시 배포할 때 이미 로드된 앱이 있는 사용자는 더 이상 존재하지 않는 이전 청크 파일을 가져오려고 하므로 앱 번들을 다시 만들 때 이전 청크 파일로 출력 폴더를 정리하지 않도록 하십시오.

가장 좋은 방법은 앱 버전 추적(AJAX 사용 및 db 또는 동적 구성 파일에서 읽기)을 하는 것이며, 앱이 새로운 버전을 감지하면 사용자에게 메시지를 보내 페이지를 다시 로드하도록 요청하십시오.

이 일에 너무 집착하지 맙시다.5번밖에 안됐어.나는 누군가 잠시동안 excalidraw를 열었다고 믿는다. 우리는 그 사이에 새로운 버전을 밀고 그들이 돌아오면 그들은 게으른 덩어리를 싣으려고 노력한다. 그리고 그것은 더 이상 존재하지 않는다.

우리가 페이스북에서 이것을 해결하는 방법은 이전 청크를 CDN에 일주일 동안 보관하고 만약 그 보따리가 일주일 이상 된 경우 사람들을 위해 앱을 새로 고치는 것이다.이런 식으로 우리는 아주 오래된 버전에 신경 쓸 필요가 없다.

위의 반응은 vjeux로부터이다.

내 계획은 window.onerror에서 오류를 청취한 다음 사용자에게 브라우저를 새로 고치도록 요청하는 것이다.

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

내 경우에는window.addEventListener('error'...방아쇠를 당기지 않아서 오버라이드했다.console.error다음과 같은 방법:

    const origin = console.error;
    console.error = (error) => {
      if (/Loading chunk [\d]+ failed/.test(error.message)) {
        alert('A new version released. Need to relaod the page to apply changes.')
        window.location.reload();
      } else {
        origin(error);
      }
    }

값 설정output.publicPath에webpack.config.js로/문제를 해결할 것이다.

또 다른 옵션은 단순히 Magic Comment /* webpackMode: "eager" */를 사용하는 것이다.보아하니 없어진 덩어리는 가져오지 않고 보따리에서 가져온다.

그것은 애초에 청킹의 목적을 능가하지만, 문제를 해결한다.

참조URL: https://stackoverflow.com/questions/53704950/webpack-code-splitting-loading-chunk-failed-error-wrong-file-path