Adjust frontend build script to allow aggressive caching

This commit is contained in:
Fabian Stamm
2023-04-14 15:43:08 +02:00
parent b68fa6f223
commit cc1696a429
7 changed files with 66 additions and 14 deletions

View File

@ -19,6 +19,7 @@
"postcss-url": "^10.1.3",
"rollup": "^3.20.2",
"rollup-plugin-esbuild": "^5.0.0",
"rollup-plugin-hash": "^1.3.0",
"rollup-plugin-livereload": "^2.0.5",
"rollup-plugin-postcss": "^4.0.2",
"rollup-plugin-sizes": "^1.0.5",

View File

@ -2,6 +2,6 @@ module.exports = {
plugins: {
tailwindcss: {},
autoprefixer: {},
cssnano: {},
// cssnano: {},
},
};

View File

@ -9,6 +9,7 @@ import postcss from "rollup-plugin-postcss";
import livereload from "rollup-plugin-livereload";
import sveltePreprocess from "svelte-preprocess";
import commonjs from "@rollup/plugin-commonjs";
import hash from "rollup-plugin-hash";
const VIEWS = ["home", "login", "popup", "user"];
@ -27,9 +28,14 @@ const htmlTemplate = ({ attributes, meta, files, publicPath, title }) => {
""
);
};
let bundle_name = "";
const scripts = (files.js || [])
.map(({ fileName }) => {
const attrs = makeHtmlAttributes(attributes.script);
if (fileName.startsWith("bundle.")) {
bundle_name = fileName;
}
return `<script src="${publicPath}${fileName}"${attrs}></script>`;
})
.join("\n");
@ -54,8 +60,7 @@ const htmlTemplate = ({ attributes, meta, files, publicPath, title }) => {
<head>
${metas}
<title>${title}</title>
<link rel="stylesheet" href="bundle.css"/>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto"/>
<link rel="stylesheet" href="${bundle_name.slice(0, -2)}css"/>
${links}
</head>
<body>
@ -66,14 +71,13 @@ const htmlTemplate = ({ attributes, meta, files, publicPath, title }) => {
export default VIEWS.map((view) => ({
input: `src/pages/${view}/main.ts`,
output: [
{
file: `build/${view}/bundle.min.js`,
format: "es",
sourcemap: true,
name: view,
},
],
output: {
dir: `build/${view}`,
entryFileNames: `bundle.[hash].min.js`,
format: "es",
sourcemap: true,
name: view,
},
plugins: [
svelte({
emitCss: true,
@ -106,9 +110,12 @@ export default VIEWS.map((view) => ({
title: `Rullup bundle for ${view}`,
}),
postcss({
extract: `bundle.css`, //TODO: Check if it should be enabled
extract: true, // `bundle.css`, //TODO: Check if it should be enabled
// inject: true,
}),
hash({
dest: "bundle.[hash].min.js",
}),
// dev && livereload(),
],
}));