Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

CLDR-17270 st: don't use late cache busting for bundle.js #3492

Merged
merged 2 commits into from
Feb 6, 2024
Merged

CLDR-17270 st: don't use late cache busting for bundle.js #3492

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
ceef05b
CLDR-17270 st: don't use late cache busting for bundle.js
srl295 Feb 2, 2024
261ff29
CLDR-17270 st: don't use late cache busting for bundle.js
srl295 Feb 2, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
32 changes: 27 additions & 5 deletions tools/cldr-apps/js/webpack.config.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,26 @@
const path = require("path");
const fs = require('fs');
const { VueLoaderPlugin } = require("vue-loader");
const { DefinePlugin } = require("webpack");
const { DefinePlugin, Compiler } = require("webpack");

class SurveyToolPlugin {
constructor() {

}
/**
*
* @param {Compiler} compiler
*/
apply(compiler) {
compiler.hooks.afterEmit.tap('SurveyToolPlugin', (compilation) => {
const { assets } = compilation;
const jsfiles = Object.keys(assets).filter(s => /\.js$/.test(s));
const manifestFile = path.resolve(compiler.outputPath, 'manifest.json');
fs.writeFileSync(manifestFile, JSON.stringify({ jsfiles }), 'utf-8');
console.log('# SurveyToolPlugin Wrote: ', manifestFile);
});
}
};

module.exports = (env, argv) => {
const {mode} = argv;
Expand All @@ -12,7 +32,7 @@ module.exports = (env, argv) => {
cacheDirectory: path.resolve(__dirname, '../target/webpack_cache'),
},
output: {
filename: "bundle.js",
filename: "[name].[contenthash].js",
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Reference for "[name]": https://webpack.js.org/guides/output-management/

Reference for "[contenthash]": https://webpack.js.org/guides/caching/

I wish I understood better. Is "[name]" going to get replaced by "index", based on "entry: "./src/index.js"?

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It's actually 'main' but it doesnt matter anymore , as I load the pieces dynamically. This would let us re segment the bundle later if desired.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

hmmm... so where would "main" come from in this case, and where's the code change that results in loading pieces dynamically?

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Main is the name of the segment in webpack… We could put all of the vendor code, such as vue.js into a separate segments, since it won't change often.

The .js I added writes the segment list to a new manifest.json file and surveytool.Java reads it.

When we have a static index.html then webpack will take care of embedding the bundle automatically.

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actually the docs are here https://webpack.js.org/configuration/output/#template-strings

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

that's helpful! also here's a glossary: https://webpack.js.org/glossary/

defines, e.g., "chunk" :-)

path: path.resolve(__dirname, "..", "src", "main", "webapp", "dist"),
library: "cldrBundle",
libraryTarget: "var",
Expand Down Expand Up @@ -43,7 +63,9 @@ module.exports = (env, argv) => {
// esm bundler flags,
// see <https://github.com/vuejs/vue-next/tree/master/packages/vue#bundler-build-feature-flags>
__VUE_PROD_DEVTOOLS__: JSON.stringify(DEV), // TODO: support dev mode
__VUE_OPTIONS_API__: JSON.stringify(true),
})],
};
__VUE_OPTIONS_API__: JSON.stringify(true),
}),
new SurveyToolPlugin(),
]
};
};
34 changes: 29 additions & 5 deletions tools/cldr-apps/src/main/java/org/unicode/cldr/web/SurveyTool.java
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,8 +1,14 @@
package org.unicode.cldr.web;

import com.google.gson.Gson;
import com.google.gson.GsonBuilder;
import java.io.IOException;
import java.io.InputStream;
import java.io.InputStreamReader;
import java.io.PrintWriter;
import java.io.Reader;
import java.io.Writer;
import java.nio.charset.StandardCharsets;
import java.util.logging.Level;
import java.util.logging.Logger;
import javax.servlet.ServletConfig;
Expand Down Expand Up @@ -242,6 +248,12 @@ public static void includeMonitoring(Writer out) throws IOException {
}
}

private static final Gson gson = new GsonBuilder().setPrettyPrinting().create();

private final class STManifest {
public String jsfiles[];
}

/**
* Write the script tags for Survey Tool JavaScript files
*
Expand All @@ -253,11 +265,23 @@ public static void includeMonitoring(Writer out) throws IOException {
public static void includeJavaScript(HttpServletRequest request, Writer out)
throws IOException, JSONException {
includeMonitoring(out);
// Load the big bundle
out.write(
"<script src=\"dist/bundle"
+ getCacheBustingExtension(request)
+ ".js\"></script>\n");

// use WebPack-built manifest.json to include all chunks.
// ideally this would all come from a static .html file built by WebPack.
// TODO https://unicode-org.atlassian.net/browse/CLDR-17353
try (final InputStream is =
request.getServletContext().getResourceAsStream("dist/manifest.json");
final Reader r = new InputStreamReader(is, StandardCharsets.UTF_8); ) {
for (final String f : gson.fromJson(r, STManifest.class).jsfiles) {
out.write(
"<script src=\""
+ request.getContextPath()
+ "/dist/"
+ f.toString()
+ "\"></script>\n");
}
}

includeJqueryJavaScript(request, out);
includeCldrJavaScript(request, out);
}
Expand Down
Loading