【发布时间】：2020-06-04 19:05:20
【问题描述】：
在我最近进行更改之前，我的网站一直运行良好。网站前端在 reactjs 上，bundle 在 aws s3 上。到目前为止一切都很好。
现在由于静态包的体积很大，同时为了优化我的代码，我开始通过 webpack split code 拆分代码，延迟加载 React 组件和动态导入。我正在使用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 链接，我可以看到静态内容，但这不是我在本地环境中看到的格式。
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
所以基本上网站不会加载任何东西（它是空白的），但底层捆绑包中有静态内容。所以在我看来，有些东西与装载机有关，或者可能 是 aws s3 加载块的方式，但我还没有找到根本原因，请帮我解决这个问题。 例如：website显示的是代码拆分前的旧版本，如果我部署最新的代码，它将是空白的。
附：现在我也用 react js 和 django 来标记它，因为代码拆分的主要原因是优化了我的 react 前端，并用 django 桥接了它，但是这两个标签都可以删除。
【问题讨论】：
标签： django reactjs amazon-s3 webpack-4