web: build polyfills into separate file, load first

Signed-off-by: Jens Langhammer <jens.langhammer@beryju.org>
This commit is contained in:
Jens Langhammer 2021-04-01 19:55:32 +02:00
parent 956d868106
commit b9e718f5b8
5 changed files with 30 additions and 6 deletions

View file

@ -14,6 +14,7 @@
<link rel="stylesheet" type="text/css" href="{% static 'dist/patternfly.min.css' %}?v={{ ak_version }}"> <link rel="stylesheet" type="text/css" href="{% static 'dist/patternfly.min.css' %}?v={{ ak_version }}">
<link rel="stylesheet" type="text/css" href="{% static 'dist/authentik.css' %}?v={{ ak_version }}"> <link rel="stylesheet" type="text/css" href="{% static 'dist/authentik.css' %}?v={{ ak_version }}">
<script src="{% url 'authentik_api:javascript-catalog' %}?v={{ ak_version }}"></script> <script src="{% url 'authentik_api:javascript-catalog' %}?v={{ ak_version }}"></script>
<script src="{% static 'dist/adoptedStyleSheets.js' %}?v={{ ak_version }}" type="module"></script>
{% block head %} {% block head %}
{% endblock %} {% endblock %}
</head> </head>

View file

@ -25,10 +25,6 @@ const resources = [
const isProdBuild = process.env.NODE_ENV === "production"; const isProdBuild = process.env.NODE_ENV === "production";
// eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types // eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types
function manualChunks(id) { function manualChunks(id) {
if (id.includes("construct-style-sheets-polyfill")) {
// Keep polyfills in the main file so they are loaded when dependencies are loaded
return "vendor-poly";
}
if (id.includes("node_modules")) { if (id.includes("node_modules")) {
if (id.includes("codemirror")) { if (id.includes("codemirror")) {
return "vendor-cm"; return "vendor-cm";
@ -63,6 +59,33 @@ export default [
clearScreen: false, clearScreen: false,
}, },
}, },
// Polyfills (imported first)
{
input: [
"construct-style-sheets-polyfill"
],
output: [
{
format: "es",
dir: "dist",
sourcemap: true,
}
],
plugins: [
cssimport(),
typescript(),
externalGlobals({
django: "django",
}),
resolve({ browser: true }),
commonjs(),
sourcemaps(),
isProdBuild && terser(),
].filter(p => p),
watch: {
clearScreen: false,
},
},
// Main Application // Main Application
{ {
input: "./src/interfaces/AdminInterface.ts", input: "./src/interfaces/AdminInterface.ts",

View file

@ -1,5 +1,3 @@
import "construct-style-sheets-polyfill";
// Elements that are used by SiteShell pages // Elements that are used by SiteShell pages
// And can't dynamically be imported // And can't dynamically be imported
import "../elements/CodeMirror"; import "../elements/CodeMirror";

View file

@ -8,6 +8,7 @@
<link rel="stylesheet" type="text/css" href="/static/dist/patternfly-base.css"> <link rel="stylesheet" type="text/css" href="/static/dist/patternfly-base.css">
<link rel="stylesheet" type="text/css" href="/static/dist/authentik.css"> <link rel="stylesheet" type="text/css" href="/static/dist/authentik.css">
<script src="/api/jsi18n/"></script> <script src="/api/jsi18n/"></script>
<script src="/static/dist/adoptedStyleSheets.js" type="module"></script>
<script src="/static/dist/AdminInterface.js" type="module"></script> <script src="/static/dist/AdminInterface.js" type="module"></script>
<title>authentik</title> <title>authentik</title>
</head> </head>

View file

@ -8,6 +8,7 @@
<link rel="stylesheet" type="text/css" href="/static/dist/patternfly-base.css"> <link rel="stylesheet" type="text/css" href="/static/dist/patternfly-base.css">
<link rel="stylesheet" type="text/css" href="/static/dist/authentik.css"> <link rel="stylesheet" type="text/css" href="/static/dist/authentik.css">
<script src="/api/jsi18n/"></script> <script src="/api/jsi18n/"></script>
<script src="/static/dist/adoptedStyleSheets.js" type="module"></script>
<script src="/static/dist/FlowInterface.js" type="module"></script> <script src="/static/dist/FlowInterface.js" type="module"></script>
<title>authentik</title> <title>authentik</title>
</head> </head>