perf: load document libraries only when needed

This commit is contained in:
tdurieux
2026-09-09 13:28:44 +02:00
parent 984906a89a
commit e68ab037eb
15 changed files with 151 additions and 53 deletions
+15 -9
View File
@@ -23,16 +23,17 @@ const coreJsFiles = [
"public/script/utils.js",
];
const vendorJsFiles = [
"public/script/external/pdf.js",
const markdownFiles = [
"public/script/external/katex.min.js",
"public/script/external/katex-auto-render.min.js",
"public/script/external/marked-katex-extension.umd.min.js",
"public/script/external/marked-mermaid.js",
"public/script/external/notebook.min.js",
"public/script/external/org.js",
"public/script/external/ace/ace.js",
];
];
const pdfFiles = ["public/script/external/pdf.js"];
const notebookFiles = ["public/script/external/notebook.min.js"];
const orgFiles = ["public/script/external/org.js"];
const editorFiles = ["public/script/external/ace/ace.js"];
const lazyGroups = { markdown: markdownFiles, pdf: pdfFiles, notebook: notebookFiles, org: orgFiles, editor: editorFiles };
const mermaidFiles = [
"public/script/external/mermaid.min.js",
@@ -64,10 +65,15 @@ function buildCoreJs(cb) {
}
async function buildVendorJs() {
const lazyAssets = {};
await Promise.all(Object.entries(lazyGroups).map(async ([name, files]) => {
await promisify(pipeline)(orderedSrc(files), concat(`${name}.min.js`), uglify(), dest("public/script"));
lazyAssets[name] = `/script/${name}.${hashFile(`public/script/${name}.min.js`)}.min.js`;
}));
const app = await esbuild.build({
entryPoints: ["public/script/main.js"], bundle: true, write: false,
format: "iife", minify: true, target: "es2020",
define: { "process.env.NODE_ENV": JSON.stringify("production"), __VUE_OPTIONS_API__: "true", __VUE_PROD_DEVTOOLS__: "false", __VUE_PROD_HYDRATION_MISMATCH_DETAILS__: "false" },
define: { __LAZY_ASSETS__: JSON.stringify(lazyAssets), "process.env.NODE_ENV": JSON.stringify("production"), __VUE_OPTIONS_API__: "true", __VUE_PROD_DEVTOOLS__: "false", __VUE_PROD_HYDRATION_MISMATCH_DETAILS__: "false" },
plugins: [{ name: "vue-templates", setup(build) {
build.onLoad({ filter: /\.htm$/ }, async ({ path }) => {
const { code, errors } = compileTemplate({
@@ -81,8 +87,7 @@ async function buildVendorJs() {
});
} }],
});
await promisify(pipeline)(orderedSrc(vendorJsFiles), concat("vendor.min.js"), uglify(), dest("public/script"));
fs.appendFileSync("public/script/vendor.min.js", "\n;" + app.outputFiles[0].text);
fs.writeFileSync("public/script/vendor.min.js", app.outputFiles[0].text);
}
function buildMermaidJs(cb) {
@@ -100,6 +105,7 @@ function writeManifest(cb) {
"mermaid.min.js": "public/script/mermaid.min.js",
"all.min.css": "public/css/all.min.css",
};
for (const name of Object.keys(lazyGroups)) files[`${name}.min.js`] = `public/script/${name}.min.js`;
const manifest = {};
for (const [key, filePath] of Object.entries(files)) {
const hash = hashFile(filePath);