Add webpack prod config (#7513)

* Add webpack config for prod * add optimization * rename top package * Add HtmlWebpackPlugin - rough draft * Move templates and ignore generated html * Use loop to create HtmlWebpackPlugins * Remove bundle.js from ensured-targets --------- Co-authored-by: Jeremy Tuloup <[email protected]>
jupyter · Nov 6, 2024 · 110e728 · 110e728
1 parent 5cac611
commit 110e728
Show file tree

Hide file tree

Showing 18 changed files with 577 additions and 217 deletions.
diff --git a/.gitignore b/.gitignore
@@ -135,3 +135,6 @@ ui-tests/playwright-report
 .pnp.*
 ui-tests/.yarn/*
 ui-tests/.pnp.*
+
+# generated html
+notebook/templates/*.html
diff --git a/app/package.json b/app/package.json
@@ -4,7 +4,7 @@
   "private": true,
   "scripts": {
     "build": "webpack",
-    "build:prod": "webpack --mode=production",
+    "build:prod": "webpack --config ./webpack.prod.config.js",
     "clean": "rimraf build && jlpm run clean:static",
     "clean:static": "rimraf -g \"../notebook/static/!(favicons)\"",
     "watch": "webpack --config ./webpack.config.watch.js"

diff --git a/app/templates/consoles_template.html b/app/templates/consoles_template.html
@@ -0,0 +1,45 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <title>{{page_config['appName'] | e}} - Console</title>
+    {% block favicon %}
+    <link
+      rel="icon"
+      type="image/x-icon"
+      href="{{ page_config['fullStaticUrl'] | e }}/favicons/favicon-console.ico"
+      class="favicon"
+    />
+    {% endblock %} {% if custom_css %}
+    <link
+      rel="stylesheet"
+      type="text/css"
+      href="{{ base_url | escape }}custom/custom.css"
+    />
+    {% endif %}
+  </head>
+  <body class="jp-ThemedContainer">
+    {# Copy so we do not modify the page_config with updates. #} {% set
+    page_config_full = page_config.copy() %} {# Set a dummy variable - we just
+    want the side effect of the update. #} {% set _ =
+    page_config_full.update(baseUrl=base_url, wsUrl=ws_url) %} {# Sentinel value
+    to say that we are on the tree page #} {% set _ =
+    page_config_full.update(notebookPage='consoles') %}
+
+    <script id="jupyter-config-data" type="application/json">
+      {{ page_config_full | tojson }}
+    </script>
+
+    <script type="text/javascript">
+      /* Remove token from URL. */
+      (function () {
+        var parsedUrl = new URL(window.location.href);
+        if (parsedUrl.searchParams.get('token')) {
+          parsedUrl.searchParams.delete('token');
+          window.history.replaceState({}, '', parsedUrl.href);
+        }
+      })();
+    </script>
+  </body>
+</html>
diff --git a/app/templates/edit_template.html b/app/templates/edit_template.html
@@ -0,0 +1,39 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <title>{{page_config['appName'] | e}} - Edit</title>
+    {% block favicon %}
+    <link
+      rel="icon"
+      type="image/x-icon"
+      href="{{ base_url | escape }}static/favicons/favicon-file.ico"
+      class="favicon"
+    />
+    {% endblock %}
+  </head>
+  <body class="jp-ThemedContainer" data-notebook="edit">
+    {# Copy so we do not modify the page_config with updates. #} {% set
+    page_config_full = page_config.copy() %} {# Set a dummy variable - we just
+    want the side effect of the update. #} {% set _ =
+    page_config_full.update(baseUrl=base_url, wsUrl=ws_url) %} {# Sentinel value
+    to say that we are on the tree page #} {% set _ =
+    page_config_full.update(notebookPage='edit') %}
+
+    <script id="jupyter-config-data" type="application/json">
+      {{ page_config_full | tojson }}
+    </script>
+
+    <script type="text/javascript">
+      /* Remove token from URL. */
+      (function () {
+        var parsedUrl = new URL(window.location.href);
+        if (parsedUrl.searchParams.get('token')) {
+          parsedUrl.searchParams.delete('token');
+          window.history.replaceState({}, '', parsedUrl.href);
+        }
+      })();
+    </script>
+  </body>
+</html>
diff --git a/notebook/templates/error.html → app/templates/error_template.html b/notebook/templates/error.html → app/templates/error_template.html
diff --git a/app/templates/notebooks_template.html b/app/templates/notebooks_template.html
@@ -0,0 +1,45 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <title>{{page_config['appName'] | e}} - Notebook</title>
+    {% block favicon %}
+    <link
+      rel="icon"
+      type="image/x-icon"
+      href="{{ base_url | escape }}static/favicons/favicon-notebook.ico"
+      class="favicon"
+    />
+    {% endblock %} {% if custom_css %}
+    <link
+      rel="stylesheet"
+      type="text/css"
+      href="{{ base_url | escape }}custom/custom.css"
+    />
+    {% endif %}
+  </head>
+  <body class="jp-ThemedContainer" data-notebook="notebooks">
+    {# Copy so we do not modify the page_config with updates. #} {% set
+    page_config_full = page_config.copy() %} {# Set a dummy variable - we just
+    want the side effect of the update. #} {% set _ =
+    page_config_full.update(baseUrl=base_url, wsUrl=ws_url) %} {# Sentinel value
+    to say that we are on the tree page #} {% set _ =
+    page_config_full.update(notebookPage='notebooks') %}
+
+    <script id="jupyter-config-data" type="application/json">
+      {{ page_config_full | tojson }}
+    </script>
+
+    <script type="text/javascript">
+      /* Remove token from URL. */
+      (function () {
+        var parsedUrl = new URL(window.location.href);
+        if (parsedUrl.searchParams.get('token')) {
+          parsedUrl.searchParams.delete('token');
+          window.history.replaceState({}, '', parsedUrl.href);
+        }
+      })();
+    </script>
+  </body>
+</html>
diff --git a/app/templates/terminals_template.html b/app/templates/terminals_template.html
@@ -0,0 +1,45 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <title>{{page_config['appName'] | e}} - Terminal</title>
+    {% block favicon %}
+    <link
+      rel="icon"
+      type="image/x-icon"
+      href="{{ base_url | escape }}static/favicons/favicon-terminal.ico"
+      class="favicon"
+    />
+    {% endblock %} {% if custom_css %}
+    <link
+      rel="stylesheet"
+      type="text/css"
+      href="{{ base_url | escape }}custom/custom.css"
+    />
+    {% endif %}
+  </head>
+  <body class="jp-ThemedContainer">
+    {# Copy so we do not modify the page_config with updates. #} {% set
+    page_config_full = page_config.copy() %} {# Set a dummy variable - we just
+    want the side effect of the update. #} {% set _ =
+    page_config_full.update(baseUrl=base_url, wsUrl=ws_url) %} {# Sentinel value
+    to say that we are on the tree page #} {% set _ =
+    page_config_full.update(notebookPage='terminals') %}
+
+    <script id="jupyter-config-data" type="application/json">
+      {{ page_config_full | tojson }}
+    </script>
+
+    <script type="text/javascript">
+      /* Remove token from URL. */
+      (function () {
+        var parsedUrl = new URL(window.location.href);
+        if (parsedUrl.searchParams.get('token')) {
+          parsedUrl.searchParams.delete('token');
+          window.history.replaceState({}, '', parsedUrl.href);
+        }
+      })();
+    </script>
+  </body>
+</html>
diff --git a/app/templates/tree_template.html b/app/templates/tree_template.html
@@ -0,0 +1,45 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <title>Home</title>
+    {% block favicon %}
+    <link
+      rel="icon"
+      type="image/x-icon"
+      href="{{ base_url | escape }}static/favicons/favicon.ico"
+      class="favicon"
+    />
+    {% endblock %} {% if custom_css %}
+    <link
+      rel="stylesheet"
+      type="text/css"
+      href="{{ base_url | escape }}custom/custom.css"
+    />
+    {% endif %}
+  </head>
+  <body class="jp-ThemedContainer">
+    {# Copy so we do not modify the page_config with updates. #} {% set
+    page_config_full = page_config.copy() %} {# Set a dummy variable - we just
+    want the side effect of the update. #} {% set _ =
+    page_config_full.update(baseUrl=base_url, wsUrl=ws_url) %} {# Sentinel value
+    to say that we are on the tree page #} {% set _ =
+    page_config_full.update(notebookPage='tree') %}
+
+    <script id="jupyter-config-data" type="application/json">
+      {{ page_config_full | tojson }}
+    </script>
+
+    <script type="text/javascript">
+      /* Remove token from URL. */
+      (function () {
+        var parsedUrl = new URL(window.location.href);
+        if (parsedUrl.searchParams.get('token')) {
+          parsedUrl.searchParams.delete('token');
+          window.history.replaceState({}, '', parsedUrl.href);
+        }
+      })();
+    </script>
+  </body>
+</html>
diff --git a/app/webpack.config.js b/app/webpack.config.js
@@ -15,6 +15,7 @@ const BundleAnalyzerPlugin =
 
 const Build = require('@jupyterlab/builder').Build;
 const WPPlugin = require('@jupyterlab/builder').WPPlugin;
+const HtmlWebpackPlugin = require('html-webpack-plugin');
 const baseConfig = require('@jupyterlab/builder/lib/webpack.config.base');
 
 const data = require('./package.json');
@@ -204,22 +205,55 @@ if (process.argv.includes('--analyze')) {
   extras.push(new BundleAnalyzerPlugin());
 }
 
+const htmlPlugins = [];
+['consoles', 'edit', 'error', 'notebooks', 'terminals', 'tree'].forEach(
+  (name) => {
+    htmlPlugins.push(
+      new HtmlWebpackPlugin({
+        chunksSortMode: 'none',
+        template: path.join(
+          path.resolve('./templates'),
+          `${name}_template.html`
+        ),
+        title: name,
+        filename: path.join(
+          path.resolve(__dirname, '..', 'notebook/templates'),
+          `${name}.html`
+        ),
+      })
+    );
+  }
+);
+
 module.exports = [
   merge(baseConfig, {
     mode: 'development',
     entry: ['./publicpath.js', './' + path.relative(__dirname, entryPoint)],
     output: {
       path: path.resolve(__dirname, '..', 'notebook/static/'),
+      publicPath: '{{page_config.fullStaticUrl}}/',
       library: {
         type: 'var',
         name: ['_JUPYTERLAB', 'CORE_OUTPUT'],
       },
-      filename: 'bundle.js',
+      filename: '[name].[contenthash].js',
+    },
+    optimization: {
+      splitChunks: {
+        chunks: 'all',
+        cacheGroups: {
+          jlab_core: {
+            test: /[\\/]node_modules[\\/]@(jupyterlab|jupyter-notebook|lumino(?!\/datagrid))[\\/]/,
+            name: 'notebook_core',
+          },
+        },
+      },
     },
     resolve: {
       fallback: { util: false },
     },
     plugins: [
+      ...htmlPlugins,
       new WPPlugin.JSONLicenseWebpackPlugin({
         excludedPackageTest: (packageName) =>
           packageName === '@jupyter-notebook/app',
@@ -235,3 +269,6 @@ module.exports = [
     ],
   }),
 ].concat(extras);
+
+const logPath = path.join(buildDir, 'build_log.json');
+fs.writeFileSync(logPath, JSON.stringify(module.exports, null, '  '));
diff --git a/app/webpack.prod.config.js b/app/webpack.prod.config.js
@@ -0,0 +1,29 @@
+/*
+ * Copyright (c) Jupyter Development Team.
+ * Distributed under the terms of the Modified BSD License.
+ */
+
+const merge = require('webpack-merge').default;
+const config = require('./webpack.config');
+const WPPlugin = require('@jupyterlab/builder').WPPlugin;
+
+config[0] = merge(config[0], {
+  mode: 'production',
+  devtool: 'source-map',
+  output: {
+    // Add version argument when in production so the Jupyter server
+    // allows caching of files (i.e., does not set the CacheControl header to no-cache to prevent caching static files)
+    filename: '[name].[contenthash].js?v=[contenthash]',
+  },
+  optimization: {
+    minimize: false,
+  },
+  plugins: [
+    new WPPlugin.JSONLicenseWebpackPlugin({
+      excludedPackageTest: (packageName) =>
+        packageName === '@jupyter-notebook/app',
+    }),
+  ],
+});
+
+module.exports = config;
diff --git a/notebook/templates/consoles.html b/notebook/templates/consoles.html