webpack: Enable code splitting and deduplication.

Signed-off-by: Anders Kaseorg <anders@zulipchat.com>

docs/subsystems/html-css.md

@@ -164,7 +164,7 @@ webpack build, JS minification and a host of other steps for getting the assets
 ready for deployment.
 
 You can trace which source files are included in which HTML templates
-by comparing the `render_bundle` calls in the HTML templates under
+by comparing the `render_entrypoint` calls in the HTML templates under
 `templates/` with the bundles declared in `tools/webpack.assets.json`.
 
 ### Adding static files

templates/zerver/base.html

@@ -21,8 +21,8 @@
         {% endif %}
 
         {% macro bundle(name) %}
-        {{ render_bundle(name, 'css', attrs='nonce="%s"' % (csp_nonce,) if csp_nonce else '') }}
-        {{ render_bundle(name, 'js', attrs='defer nonce="%s"' % (csp_nonce,) if csp_nonce else 'defer') }}
+        {{ render_entrypoint(name, 'css', attrs='nonce="%s"' % (csp_nonce,) if csp_nonce else '') }}
+        {{ render_entrypoint(name, 'js', attrs='defer nonce="%s"' % (csp_nonce,) if csp_nonce else 'defer') }}
         {% endmacro %}
 
         <!-- This is a temporary block to enable webpack transition

tools/linter_lib/custom_check.py

@@ -620,7 +620,7 @@ html_rules = whitespace_rules + prose_style_rules + [
      'description': "Don't directly load dependencies from CDNs.  See docs/subsystems/html-css.md",
      'exclude': set(["templates/corporate/billing.html", "templates/zerver/hello.html",
                      "templates/corporate/upgrade.html"]),
-     'good_lines': ["{{ render_bundle('landing-page') }}"],
+     'good_lines': ["{{ render_entrypoint('landing-page') }}"],
      'bad_lines': ['<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>']},
     {'pattern': "title='[^{]",
      'description': "`title` value should be translatable.",

tools/webpack

@@ -108,7 +108,8 @@ def build_for_most_tests():
             }]
     stat_data = {
         "status": "done",
-        "chunks": entries
+        "chunks": entries,
+        "entryPoints": {name: [chunk] for name, chunk in entries.items()},
     }
     directory = 'var'
     if not os.path.exists(directory):

tools/webpack.config.ts

@@ -130,7 +130,8 @@ export default (env?: string): webpack.Configuration[] => {
         output: {
             path: resolve(__dirname, '../static/webpack-bundles'),
             publicPath,
-            filename: production ? '[name].[chunkhash].js' : '[name].js',
+            filename: production ? '[name].[contenthash].js' : '[name].js',
+            chunkFilename: production ? '[contenthash].js' : '[id].js',
         },
         resolve: {
             extensions: [".ts", ".js"],
@@ -178,6 +179,12 @@ export default (env?: string): webpack.Configuration[] => {
                     sourceMap: true,
                 }),
             ],
+            splitChunks: {
+                chunks: "all",
+                // webpack/examples/many-pages suggests 20 requests for HTTP/2
+                maxAsyncRequests: 20,
+                maxInitialRequests: 20,
+            },
         },
         plugins: [
             new BundleTracker({
@@ -196,7 +203,7 @@ export default (env?: string): webpack.Configuration[] => {
             // Extract CSS from files
             new MiniCssExtractPlugin({
                 filename: production ? "[name].[contenthash].css" : "[name].css",
-                chunkFilename: "[chunkhash].css",
+                chunkFilename: production ? "[contenthash].css" : "[id].css",
             }),
             new HtmlWebpackPlugin({
                 filename: "5xx.html",