Web: Doceditor: fixed adding script with src="undefined", client bundle optimization
This commit is contained in:
Artem Tarasov
parent
e48e4e3583
commit
243ccf34a5
@ -32,7 +32,7 @@ const App = ({ initialLanguage, initialI18nStoreASC, ...rest }) => {
|
||||
|
||||
useEffect(() => {
|
||||
const tempElm = document.getElementById("loader");
|
||||
if (tempElm && !rest.error && !rest.needLoader) {
|
||||
if (tempElm && !rest.error && !rest.needLoader && rest.docApiUrl) {
|
||||
tempElm.outerHTML = "";
|
||||
}
|
||||
|
||||
|
||||
@ -126,3 +126,16 @@ export const getAssets = () => {
|
||||
|
||||
return assets;
|
||||
};
|
||||
|
||||
export const getScripts = (assets) => {
|
||||
const regTest = /static\/js\/.*/;
|
||||
const keys = [];
|
||||
|
||||
for (let key in assets) {
|
||||
if (assets.hasOwnProperty(key) && regTest.test(key)) {
|
||||
keys.push(key);
|
||||
}
|
||||
}
|
||||
|
||||
return keys;
|
||||
};
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
import { getFavicon } from "./helpers";
|
||||
import { getFavicon, getScripts } from "./helpers";
|
||||
import pkg from "../../../package.json";
|
||||
|
||||
export default function template(
|
||||
@ -11,10 +11,27 @@ export default function template(
|
||||
) {
|
||||
const { title } = pkg;
|
||||
const { docApiUrl, error } = initialEditorState;
|
||||
|
||||
const faviconHref = getFavicon(initialEditorState?.config?.documentType);
|
||||
const docApi = error
|
||||
? ""
|
||||
: `<script type='text/javascript' id='scripDocServiceAddress' src="${docApiUrl}" async></script>`;
|
||||
|
||||
let clientScripts =
|
||||
assets && assets.hasOwnProperty("client.js")
|
||||
? `<script defer="defer" src='${assets["client.js"]}'></script>`
|
||||
: "";
|
||||
|
||||
const editorApiScript =
|
||||
error || !docApiUrl
|
||||
? ""
|
||||
: `<script type='text/javascript' id='scripDocServiceAddress' src="${docApiUrl}" async></script>`;
|
||||
|
||||
if (!IS_DEVELOPMENT) {
|
||||
const productionBundleKeys = getScripts(assets);
|
||||
productionBundleKeys.map((key) => {
|
||||
clientScripts =
|
||||
clientScripts + `<script defer="defer" src='${assets[key]}'></script>`;
|
||||
});
|
||||
}
|
||||
|
||||
const scripts = `
|
||||
<script id="__ASC_INITIAL_EDITOR_STATE__">
|
||||
window.__ASC_INITIAL_EDITOR_STATE__ = ${JSON.stringify(
|
||||
@ -25,15 +42,15 @@ export default function template(
|
||||
window.initialI18nStoreASC = ${JSON.stringify(initialI18nStoreASC)}
|
||||
window.initialLanguage = '${initialLanguage}'
|
||||
</script>
|
||||
<script defer="defer" src='${assets["client.js"]}'></script>
|
||||
${clientScripts}
|
||||
<script>
|
||||
const tempElm = document.getElementById("loader");
|
||||
tempElm.style.backgroundColor =
|
||||
localStorage.theme === "Dark" ? "#333333" : "#f4f4f4";
|
||||
console.log("It's Editor INIT");
|
||||
</script>
|
||||
${docApi}
|
||||
|
||||
${editorApiScript}
|
||||
|
||||
`;
|
||||
// <script defer="defer" src='${assets["runtime.js"]}'></script>
|
||||
// <script defer="defer" src='${assets["vendor.js"]}'></script>
|
||||
@ -56,302 +73,302 @@ export default function template(
|
||||
<link rel="apple-touch-icon" href="/appIcon.png" />
|
||||
${styleTags}
|
||||
<style type="text/css">
|
||||
.loadmask {
|
||||
left: 0;
|
||||
top: 0;
|
||||
position: absolute;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
border: none;
|
||||
background-color: #f4f4f4;
|
||||
z-index: 1001;
|
||||
}
|
||||
.loader-page {
|
||||
width: 100%;
|
||||
height: 170px;
|
||||
bottom: 42%;
|
||||
position: absolute;
|
||||
text-align: center;
|
||||
line-height: 10px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.loader-page-romb {
|
||||
width: 40px;
|
||||
display: inline-block;
|
||||
}
|
||||
.romb {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
position: absolute;
|
||||
background: red;
|
||||
border-radius: 6px;
|
||||
-webkit-transform: rotate(135deg) skew(20deg, 20deg);
|
||||
-moz-transform: rotate(135deg) skew(20deg, 20deg);
|
||||
-ms-transform: rotate(135deg) skew(20deg, 20deg);
|
||||
-o-transform: rotate(135deg) skew(20deg, 20deg);
|
||||
-webkit-animation: movedown 3s infinite ease;
|
||||
-moz-animation: movedown 3s infinite ease;
|
||||
-ms-animation: movedown 3s infinite ease;
|
||||
-o-animation: movedown 3s infinite ease;
|
||||
animation: movedown 3s infinite ease;
|
||||
}
|
||||
#blue {
|
||||
z-index: 3;
|
||||
background: #55bce6;
|
||||
-webkit-animation-name: blue;
|
||||
-moz-animation-name: blue;
|
||||
-ms-animation-name: blue;
|
||||
-o-animation-name: blue;
|
||||
animation-name: blue;
|
||||
}
|
||||
#red {
|
||||
z-index: 1;
|
||||
background: #de7a59;
|
||||
-webkit-animation-name: red;
|
||||
-moz-animation-name: red;
|
||||
-ms-animation-name: red;
|
||||
-o-animation-name: red;
|
||||
animation-name: red;
|
||||
}
|
||||
#green {
|
||||
z-index: 2;
|
||||
background: #a1cb5c;
|
||||
-webkit-animation-name: green;
|
||||
-moz-animation-name: green;
|
||||
-ms-animation-name: green;
|
||||
-o-animation-name: green;
|
||||
animation-name: green;
|
||||
}
|
||||
@-webkit-keyframes red {
|
||||
0% {
|
||||
top: 120px;
|
||||
background: #de7a59;
|
||||
}
|
||||
10% {
|
||||
top: 120px;
|
||||
background: #f2cbbf;
|
||||
}
|
||||
14% {
|
||||
background: #f4f4f4;
|
||||
top: 120px;
|
||||
}
|
||||
15% {
|
||||
background: #f4f4f4;
|
||||
top: 0;
|
||||
}
|
||||
20% {
|
||||
background: #e6e4e4;
|
||||
}
|
||||
30% {
|
||||
background: #d2d2d2;
|
||||
}
|
||||
40% {
|
||||
top: 120px;
|
||||
}
|
||||
100% {
|
||||
top: 120px;
|
||||
background: #de7a59;
|
||||
}
|
||||
}
|
||||
@keyframesred {
|
||||
0% {
|
||||
top: 120px;
|
||||
background: #de7a59;
|
||||
}
|
||||
10% {
|
||||
top: 120px;
|
||||
background: #f2cbbf;
|
||||
}
|
||||
14% {
|
||||
background: #f4f4f4;
|
||||
top: 120px;
|
||||
}
|
||||
15% {
|
||||
background: #f4f4f4;
|
||||
top: 0;
|
||||
}
|
||||
20% {
|
||||
background: #e6e4e4;
|
||||
}
|
||||
30% {
|
||||
background: #d2d2d2;
|
||||
}
|
||||
40% {
|
||||
top: 120px;
|
||||
}
|
||||
100% {
|
||||
top: 120px;
|
||||
background: #de7a59;
|
||||
}
|
||||
}
|
||||
@-webkit-keyframes green {
|
||||
0% {
|
||||
top: 110px;
|
||||
background: #a1cb5c;
|
||||
opacity: 1;
|
||||
}
|
||||
10% {
|
||||
top: 110px;
|
||||
background: #cbe0ac;
|
||||
opacity: 1;
|
||||
}
|
||||
14% {
|
||||
background: #f4f4f4;
|
||||
top: 110px;
|
||||
opacity: 1;
|
||||
}
|
||||
15% {
|
||||
background: #f4f4f4;
|
||||
top: 0;
|
||||
opacity: 1;
|
||||
}
|
||||
20% {
|
||||
background: #f4f4f4;
|
||||
top: 0;
|
||||
opacity: 0;
|
||||
}
|
||||
25% {
|
||||
background: #efefef;
|
||||
top: 0;
|
||||
opacity: 1;
|
||||
}
|
||||
30% {
|
||||
background: #e6e4e4;
|
||||
}
|
||||
70% {
|
||||
top: 110px;
|
||||
}
|
||||
100% {
|
||||
top: 110px;
|
||||
background: #a1cb5c;
|
||||
}
|
||||
}
|
||||
@keyframes green {
|
||||
0% {
|
||||
top: 110px;
|
||||
background: #a1cb5c;
|
||||
opacity: 1;
|
||||
}
|
||||
10% {
|
||||
top: 110px;
|
||||
background: #cbe0ac;
|
||||
opacity: 1;
|
||||
}
|
||||
14% {
|
||||
background: #f4f4f4;
|
||||
top: 110px;
|
||||
opacity: 1;
|
||||
}
|
||||
15% {
|
||||
background: #f4f4f4;
|
||||
top: 0;
|
||||
opacity: 1;
|
||||
}
|
||||
20% {
|
||||
background: #f4f4f4;
|
||||
top: 0;
|
||||
opacity: 0;
|
||||
}
|
||||
25% {
|
||||
background: #efefef;
|
||||
top: 0;
|
||||
opacity: 1;
|
||||
}
|
||||
30% {
|
||||
background: #e6e4e4;
|
||||
}
|
||||
70% {
|
||||
top: 110px;
|
||||
}
|
||||
100% {
|
||||
top: 110px;
|
||||
background: #a1cb5c;
|
||||
}
|
||||
}
|
||||
@-webkit-keyframes blue {
|
||||
0% {
|
||||
top: 100px;
|
||||
background: #55bce6;
|
||||
opacity: 1;
|
||||
}
|
||||
10% {
|
||||
top: 100px;
|
||||
background: #bfe8f8;
|
||||
opacity: 1;
|
||||
}
|
||||
14% {
|
||||
background: #f4f4f4;
|
||||
top: 100px;
|
||||
opacity: 1;
|
||||
}
|
||||
15% {
|
||||
background: #f4f4f4;
|
||||
top: 0;
|
||||
opacity: 1;
|
||||
}
|
||||
20% {
|
||||
background: #f4f4f4;
|
||||
top: 0;
|
||||
opacity: 0;
|
||||
}
|
||||
25% {
|
||||
background: #f4f4f4;
|
||||
top: 0;
|
||||
opacity: 0;
|
||||
}
|
||||
45% {
|
||||
background: #efefef;
|
||||
top: 0;
|
||||
opacity: 0.2;
|
||||
}
|
||||
100% {
|
||||
top: 100px;
|
||||
background: #55bce6;
|
||||
}
|
||||
}
|
||||
@keyframes blue {
|
||||
0% {
|
||||
top: 100px;
|
||||
background: #55bce6;
|
||||
opacity: 1;
|
||||
}
|
||||
10% {
|
||||
top: 100px;
|
||||
background: #bfe8f8;
|
||||
opacity: 1;
|
||||
}
|
||||
14% {
|
||||
background: #f4f4f4;
|
||||
top: 100px;
|
||||
opacity: 1;
|
||||
}
|
||||
15% {
|
||||
background: #f4f4f4;
|
||||
top: 0;
|
||||
opacity: 1;
|
||||
}
|
||||
20% {
|
||||
background: #f4f4f4;
|
||||
top: 0;
|
||||
opacity: 0;
|
||||
}
|
||||
25% {
|
||||
background: #fff;
|
||||
top: 0;
|
||||
opacity: 0;
|
||||
}
|
||||
45% {
|
||||
background: #efefef;
|
||||
top: 0;
|
||||
opacity: 0.2;
|
||||
}
|
||||
100% {
|
||||
top: 100px;
|
||||
background: #55bce6;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
.loadmask {
|
||||
left: 0;
|
||||
top: 0;
|
||||
position: absolute;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
border: none;
|
||||
background-color: #f4f4f4;
|
||||
z-index: 1001;
|
||||
}
|
||||
.loader-page {
|
||||
width: 100%;
|
||||
height: 170px;
|
||||
bottom: 42%;
|
||||
position: absolute;
|
||||
text-align: center;
|
||||
line-height: 10px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.loader-page-romb {
|
||||
width: 40px;
|
||||
display: inline-block;
|
||||
}
|
||||
.romb {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
position: absolute;
|
||||
background: red;
|
||||
border-radius: 6px;
|
||||
-webkit-transform: rotate(135deg) skew(20deg, 20deg);
|
||||
-moz-transform: rotate(135deg) skew(20deg, 20deg);
|
||||
-ms-transform: rotate(135deg) skew(20deg, 20deg);
|
||||
-o-transform: rotate(135deg) skew(20deg, 20deg);
|
||||
-webkit-animation: movedown 3s infinite ease;
|
||||
-moz-animation: movedown 3s infinite ease;
|
||||
-ms-animation: movedown 3s infinite ease;
|
||||
-o-animation: movedown 3s infinite ease;
|
||||
animation: movedown 3s infinite ease;
|
||||
}
|
||||
#blue {
|
||||
z-index: 3;
|
||||
background: #55bce6;
|
||||
-webkit-animation-name: blue;
|
||||
-moz-animation-name: blue;
|
||||
-ms-animation-name: blue;
|
||||
-o-animation-name: blue;
|
||||
animation-name: blue;
|
||||
}
|
||||
#red {
|
||||
z-index: 1;
|
||||
background: #de7a59;
|
||||
-webkit-animation-name: red;
|
||||
-moz-animation-name: red;
|
||||
-ms-animation-name: red;
|
||||
-o-animation-name: red;
|
||||
animation-name: red;
|
||||
}
|
||||
#green {
|
||||
z-index: 2;
|
||||
background: #a1cb5c;
|
||||
-webkit-animation-name: green;
|
||||
-moz-animation-name: green;
|
||||
-ms-animation-name: green;
|
||||
-o-animation-name: green;
|
||||
animation-name: green;
|
||||
}
|
||||
@-webkit-keyframes red {
|
||||
0% {
|
||||
top: 120px;
|
||||
background: #de7a59;
|
||||
}
|
||||
10% {
|
||||
top: 120px;
|
||||
background: #f2cbbf;
|
||||
}
|
||||
14% {
|
||||
background: #f4f4f4;
|
||||
top: 120px;
|
||||
}
|
||||
15% {
|
||||
background: #f4f4f4;
|
||||
top: 0;
|
||||
}
|
||||
20% {
|
||||
background: #e6e4e4;
|
||||
}
|
||||
30% {
|
||||
background: #d2d2d2;
|
||||
}
|
||||
40% {
|
||||
top: 120px;
|
||||
}
|
||||
100% {
|
||||
top: 120px;
|
||||
background: #de7a59;
|
||||
}
|
||||
}
|
||||
@keyframesred {
|
||||
0% {
|
||||
top: 120px;
|
||||
background: #de7a59;
|
||||
}
|
||||
10% {
|
||||
top: 120px;
|
||||
background: #f2cbbf;
|
||||
}
|
||||
14% {
|
||||
background: #f4f4f4;
|
||||
top: 120px;
|
||||
}
|
||||
15% {
|
||||
background: #f4f4f4;
|
||||
top: 0;
|
||||
}
|
||||
20% {
|
||||
background: #e6e4e4;
|
||||
}
|
||||
30% {
|
||||
background: #d2d2d2;
|
||||
}
|
||||
40% {
|
||||
top: 120px;
|
||||
}
|
||||
100% {
|
||||
top: 120px;
|
||||
background: #de7a59;
|
||||
}
|
||||
}
|
||||
@-webkit-keyframes green {
|
||||
0% {
|
||||
top: 110px;
|
||||
background: #a1cb5c;
|
||||
opacity: 1;
|
||||
}
|
||||
10% {
|
||||
top: 110px;
|
||||
background: #cbe0ac;
|
||||
opacity: 1;
|
||||
}
|
||||
14% {
|
||||
background: #f4f4f4;
|
||||
top: 110px;
|
||||
opacity: 1;
|
||||
}
|
||||
15% {
|
||||
background: #f4f4f4;
|
||||
top: 0;
|
||||
opacity: 1;
|
||||
}
|
||||
20% {
|
||||
background: #f4f4f4;
|
||||
top: 0;
|
||||
opacity: 0;
|
||||
}
|
||||
25% {
|
||||
background: #efefef;
|
||||
top: 0;
|
||||
opacity: 1;
|
||||
}
|
||||
30% {
|
||||
background: #e6e4e4;
|
||||
}
|
||||
70% {
|
||||
top: 110px;
|
||||
}
|
||||
100% {
|
||||
top: 110px;
|
||||
background: #a1cb5c;
|
||||
}
|
||||
}
|
||||
@keyframes green {
|
||||
0% {
|
||||
top: 110px;
|
||||
background: #a1cb5c;
|
||||
opacity: 1;
|
||||
}
|
||||
10% {
|
||||
top: 110px;
|
||||
background: #cbe0ac;
|
||||
opacity: 1;
|
||||
}
|
||||
14% {
|
||||
background: #f4f4f4;
|
||||
top: 110px;
|
||||
opacity: 1;
|
||||
}
|
||||
15% {
|
||||
background: #f4f4f4;
|
||||
top: 0;
|
||||
opacity: 1;
|
||||
}
|
||||
20% {
|
||||
background: #f4f4f4;
|
||||
top: 0;
|
||||
opacity: 0;
|
||||
}
|
||||
25% {
|
||||
background: #efefef;
|
||||
top: 0;
|
||||
opacity: 1;
|
||||
}
|
||||
30% {
|
||||
background: #e6e4e4;
|
||||
}
|
||||
70% {
|
||||
top: 110px;
|
||||
}
|
||||
100% {
|
||||
top: 110px;
|
||||
background: #a1cb5c;
|
||||
}
|
||||
}
|
||||
@-webkit-keyframes blue {
|
||||
0% {
|
||||
top: 100px;
|
||||
background: #55bce6;
|
||||
opacity: 1;
|
||||
}
|
||||
10% {
|
||||
top: 100px;
|
||||
background: #bfe8f8;
|
||||
opacity: 1;
|
||||
}
|
||||
14% {
|
||||
background: #f4f4f4;
|
||||
top: 100px;
|
||||
opacity: 1;
|
||||
}
|
||||
15% {
|
||||
background: #f4f4f4;
|
||||
top: 0;
|
||||
opacity: 1;
|
||||
}
|
||||
20% {
|
||||
background: #f4f4f4;
|
||||
top: 0;
|
||||
opacity: 0;
|
||||
}
|
||||
25% {
|
||||
background: #f4f4f4;
|
||||
top: 0;
|
||||
opacity: 0;
|
||||
}
|
||||
45% {
|
||||
background: #efefef;
|
||||
top: 0;
|
||||
opacity: 0.2;
|
||||
}
|
||||
100% {
|
||||
top: 100px;
|
||||
background: #55bce6;
|
||||
}
|
||||
}
|
||||
@keyframes blue {
|
||||
0% {
|
||||
top: 100px;
|
||||
background: #55bce6;
|
||||
opacity: 1;
|
||||
}
|
||||
10% {
|
||||
top: 100px;
|
||||
background: #bfe8f8;
|
||||
opacity: 1;
|
||||
}
|
||||
14% {
|
||||
background: #f4f4f4;
|
||||
top: 100px;
|
||||
opacity: 1;
|
||||
}
|
||||
15% {
|
||||
background: #f4f4f4;
|
||||
top: 0;
|
||||
opacity: 1;
|
||||
}
|
||||
20% {
|
||||
background: #f4f4f4;
|
||||
top: 0;
|
||||
opacity: 0;
|
||||
}
|
||||
25% {
|
||||
background: #fff;
|
||||
top: 0;
|
||||
opacity: 0;
|
||||
}
|
||||
45% {
|
||||
background: #efefef;
|
||||
top: 0;
|
||||
opacity: 0.2;
|
||||
}
|
||||
100% {
|
||||
top: 100px;
|
||||
background: #55bce6;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="loader" class="loadmask">
|
||||
@ -366,7 +383,7 @@ export default function template(
|
||||
<div id="root">${appComponent}</div>
|
||||
<noscript> You need to enable JavaScript to run this app. </noscript>
|
||||
${scripts}
|
||||
</body>
|
||||
</body>
|
||||
</html>
|
||||
`;
|
||||
|
||||
|
||||
@ -110,7 +110,7 @@ module.exports = (env, argv) => {
|
||||
if (argv.mode === "production") {
|
||||
clientConfig.mode = "production";
|
||||
clientConfig.optimization = {
|
||||
// splitChunks: { chunks: "all" },
|
||||
splitChunks: { chunks: "all" },
|
||||
minimize: !env.minimize,
|
||||
minimizer: [new TerserPlugin()],
|
||||
};
|
||||
|
||||
Loading…
Reference in New Issue
Block a user