Reactjs SPA 在拆分代码后停止工作，（静态包未从 AWS S3 加载）
Reactjs SPA stopped working after splitting code, ( static bundle is not loading from AWS S3)
在我最近更改之前，我的网站一直运行良好。网站前端在reactjs上，bundle在aws s3上。到目前为止一切都很好。
现在由于静态包的体积庞大，同时为了优化我的代码，我开始通过 webpack split code, lazy loading of react component and dynamic import. I am using webpack-bundle-tracker 拆分代码来创建包，因为我的后端是在 django 上。这个新设置在我的本地环境中运行良好。
DEV environment:
<script type="text/javascript" src="/static/frontend/main.35952edee77e6e3f52e5.bundle.js" ></script>
这会加载格式良好的代码以加载到我的本地环境中：
DEV environment:
/******/ (function(modules) { // webpackBootstrap
/******/ // install a JSONP callback for chunk loading
/******/ function webpackJsonpCallback(data) {
/******/ var chunkIds = data[0];
/******/ var moreModules = data[1];
/******/
/******/
/******/ // add "moreModules" to the modules object,
/******/ // then flag all "chunkIds" as loaded and fire callback
/******/ var moduleId, chunkId, i = 0, resolves = [];
/******/ for(;i < chunkIds.length; i++) {
/******/ chunkId = chunkIds[i];
/******/ if(Object.prototype.hasOwnProperty.call(installedChunks, chunkId) && installedChunks[chunkId]) {
/******/ resolves.push(installedChunks[chunkId][0]);
/******/ }
/******/ installedChunks[chunkId] = 0;
/******/ }
/******/ for(moduleId in moreModules) {
/******/ if(Object.prototype.hasOwnProperty.call(moreModules, moduleId)) {
/******/ modules[moduleId] = moreModules[moduleId];
/******/ }
/******/ }
/******/ if(parentJsonpFunction) parentJsonpFunction(data);
/******/
/******/ while(resolves.length) {
/******/ resolves.shift()();
/******/ }
/******/
/******/ };
但是当我在 heroku 上部署代码并在 aws s3 上推送静态包时，它停止工作。它没有抛出任何错误，所以我无法理解这个问题的原因。
Prod env
<script type="text/javascript" src="https://ecmsdjango-main.s3.amazonaws.com/staticfiles/main.54a39fc868c800757af7.bundle.js" ></script>
此外，如果我单击上面的 aws link，我可以看到静态内容，但是这不是我在本地环境中看到的格式。
Prod env
(window.webpackJsonp=window.webpackJsonp||[]).push([[0],{1003:function(e,t,n){},1004:function(e,t,n){"use strict";n.r(t);var r=n(0),a=n.n(r),o=n(81),s=n(12),i=n(38),c=n(1),l=n.n(c),u=n(14);function p(e){return(p="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e})(e)}function m(e,t){for(var n=0;n<t.length;n++){var r=t[n];r.enumerable=r.enumerable||!1,r.configurable=!0,"value"in r&&(r.writable=!0),Object.defineProperty(e,r.key,r)}}function d(e,t){return!t||"object"!==p(t)&&"function"!=typeof t?function(e){if(void 0!==e)return e;throw new ReferenceError("this hasn't been initialised - super() hasn't been called")}(e):t}function h(e){return(h=Object.setPrototypeOf?Object.getPrototypeOf:function(e){return e.__proto__||Object.getPrototypeOf(e)})(e)}function f(e,t){return(f=Object.setPrototypeOf||function(e,t){return e.__proto__=t,e})(e,t)}var g=function(){function i(){var e,t,a;!function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}(this,i);for(var n=arguments.length,r=new Array(n),o=0;o<n;o++)r[o]=arguments[o];return d(a,(t=a=d(this,(e=h(i)).call.apply(e,[this].concat(r))),a.state={username:"",password:""},a.onSubmit=function(e){e.preventDefault(),a.props.login(a.state.username,a.state.password)},a.onChange=function(e){return a.setState((t={},n=e.target.name,r=e.target.value,n in t?Object.defineProperty(t,n,{value:r,enumerable:!0,configurable:!0,writable:!0}):t[n]=r,t));var t,n,r},t))}var e,t,n;return
So basically the website doesn't load any thing (its blank) but underlying bundles have static content in it. So it appears to me that something is linked with the loader or could
be the way aws s3 loads the chunks, but I haven't got root cause yet, please help me to fix this.
For example: website is showing old version before code split, if I deploy the latest code, it will be blank.
P.S。现在我用 react js，django 标记它，因为代码拆分的主要原因是优化我的 react 前端，并用 django 桥接它，但这两个标记都可以删除。
问题的发生是因为 webpack 拆分块优化配置，我已经从 prod 中删除了该配置，看起来一切正常。我在 webpack 开发配置中没有这个额外的优化。
我将它标记为一个答案，因为现在我知道了根本原因，它不是 aws s3 或 webpack 的问题，总的来说它现在不再是问题了。
在我最近更改之前，我的网站一直运行良好。网站前端在reactjs上，bundle在aws s3上。到目前为止一切都很好。
现在由于静态包的体积庞大，同时为了优化我的代码，我开始通过 webpack split code, lazy loading of react component and dynamic import. I am using webpack-bundle-tracker 拆分代码来创建包，因为我的后端是在 django 上。这个新设置在我的本地环境中运行良好。
DEV environment:
<script type="text/javascript" src="/static/frontend/main.35952edee77e6e3f52e5.bundle.js" ></script>
这会加载格式良好的代码以加载到我的本地环境中：
DEV environment:
/******/ (function(modules) { // webpackBootstrap
/******/ // install a JSONP callback for chunk loading
/******/ function webpackJsonpCallback(data) {
/******/ var chunkIds = data[0];
/******/ var moreModules = data[1];
/******/
/******/
/******/ // add "moreModules" to the modules object,
/******/ // then flag all "chunkIds" as loaded and fire callback
/******/ var moduleId, chunkId, i = 0, resolves = [];
/******/ for(;i < chunkIds.length; i++) {
/******/ chunkId = chunkIds[i];
/******/ if(Object.prototype.hasOwnProperty.call(installedChunks, chunkId) && installedChunks[chunkId]) {
/******/ resolves.push(installedChunks[chunkId][0]);
/******/ }
/******/ installedChunks[chunkId] = 0;
/******/ }
/******/ for(moduleId in moreModules) {
/******/ if(Object.prototype.hasOwnProperty.call(moreModules, moduleId)) {
/******/ modules[moduleId] = moreModules[moduleId];
/******/ }
/******/ }
/******/ if(parentJsonpFunction) parentJsonpFunction(data);
/******/
/******/ while(resolves.length) {
/******/ resolves.shift()();
/******/ }
/******/
/******/ };
但是当我在 heroku 上部署代码并在 aws s3 上推送静态包时，它停止工作。它没有抛出任何错误，所以我无法理解这个问题的原因。
Prod env
<script type="text/javascript" src="https://ecmsdjango-main.s3.amazonaws.com/staticfiles/main.54a39fc868c800757af7.bundle.js" ></script>
此外，如果我单击上面的 aws link，我可以看到静态内容，但是这不是我在本地环境中看到的格式。
Prod env
(window.webpackJsonp=window.webpackJsonp||[]).push([[0],{1003:function(e,t,n){},1004:function(e,t,n){"use strict";n.r(t);var r=n(0),a=n.n(r),o=n(81),s=n(12),i=n(38),c=n(1),l=n.n(c),u=n(14);function p(e){return(p="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e})(e)}function m(e,t){for(var n=0;n<t.length;n++){var r=t[n];r.enumerable=r.enumerable||!1,r.configurable=!0,"value"in r&&(r.writable=!0),Object.defineProperty(e,r.key,r)}}function d(e,t){return!t||"object"!==p(t)&&"function"!=typeof t?function(e){if(void 0!==e)return e;throw new ReferenceError("this hasn't been initialised - super() hasn't been called")}(e):t}function h(e){return(h=Object.setPrototypeOf?Object.getPrototypeOf:function(e){return e.__proto__||Object.getPrototypeOf(e)})(e)}function f(e,t){return(f=Object.setPrototypeOf||function(e,t){return e.__proto__=t,e})(e,t)}var g=function(){function i(){var e,t,a;!function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}(this,i);for(var n=arguments.length,r=new Array(n),o=0;o<n;o++)r[o]=arguments[o];return d(a,(t=a=d(this,(e=h(i)).call.apply(e,[this].concat(r))),a.state={username:"",password:""},a.onSubmit=function(e){e.preventDefault(),a.props.login(a.state.username,a.state.password)},a.onChange=function(e){return a.setState((t={},n=e.target.name,r=e.target.value,n in t?Object.defineProperty(t,n,{value:r,enumerable:!0,configurable:!0,writable:!0}):t[n]=r,t));var t,n,r},t))}var e,t,n;return
So basically the website doesn't load any thing (its blank) but underlying bundles have static content in it. So it appears to me that something is linked with the loader or could be the way aws s3 loads the chunks, but I haven't got root cause yet, please help me to fix this. For example: website is showing old version before code split, if I deploy the latest code, it will be blank.
P.S。现在我用 react js，django 标记它，因为代码拆分的主要原因是优化我的 react 前端，并用 django 桥接它，但这两个标记都可以删除。
问题的发生是因为 webpack 拆分块优化配置，我已经从 prod 中删除了该配置，看起来一切正常。我在 webpack 开发配置中没有这个额外的优化。 我将它标记为一个答案，因为现在我知道了根本原因，它不是 aws s3 或 webpack 的问题，总的来说它现在不再是问题了。