Reduce minified JS bundle size from 189kb to 73kb (github#17552)

heiskr · web-flow · commit 8b86fd8fef70 · 2021-01-28T22:12:04.000Z
diff --git a/includes/scripts.html b/includes/scripts.html
@@ -1 +1,2 @@
+<script id="search-options" type="application/json">{{ searchOptions }}</script>
 <script src="{{ builtAssets.main.js }}"></script>
diff --git a/javascripts/copy-code.js b/javascripts/copy-code.js
@@ -1,15 +1,19 @@
-import Clipboard from 'clipboard'
-
 export default () => {
-  const clipboard = new Clipboard('button.js-btn-copy')
+  const buttons = Array.from(document.querySelectorAll('button.js-btn-copy'))
+
+  if (!buttons) return
+
+  buttons.forEach(button =>
+    button.addEventListener('click', async evt => {
+      const text = button.dataset.clipboardText
+      await navigator.clipboard.writeText(text)
 
-  clipboard.on('success', evt => {
-    const btn = evt.trigger
-    const beforeTooltip = btn.getAttribute('aria-label')
-    btn.setAttribute('aria-label', 'Copied!')
+      const beforeTooltip = button.getAttribute('aria-label')
+      button.setAttribute('aria-label', 'Copied!')
 
-    setTimeout(() => {
-      btn.setAttribute('aria-label', beforeTooltip)
-    }, 2000)
-  })
+      setTimeout(() => {
+        button.setAttribute('aria-label', beforeTooltip)
+      }, 2000)
+    })
+  )
 }
diff --git a/javascripts/display-platform-specific-content.js b/javascripts/display-platform-specific-content.js
@@ -1,15 +1,17 @@
-const { getPlatformFromUserAgent } = require('platform-utils')
+import parseUserAgent from './user-agent'
 const supportedPlatforms = ['mac', 'windows', 'linux']
 const detectedPlatforms = new Set()
 
 // Emphasize content for the visitor's OS (inferred from user agent string)
 
 export default function displayPlatformSpecificContent () {
-  let platform = getDefaultPlatform() || getPlatformFromUserAgent()
+  let platform = getDefaultPlatform() || parseUserAgent().os
 
   // adjust platform names to fit existing mac/windows/linux scheme
   if (!platform) platform = 'mac' // default to 'mac' on mobile
   if (platform === 'darwin') platform = 'mac'
+  if (platform === 'ios') platform = 'mac'
+  if (platform === 'android') platform = 'linux'
   if (platform.startsWith('win')) platform = 'windows'
 
   const platformsInContent = findPlatformSpecificContent(platform)
diff --git a/javascripts/search.js b/javascripts/search.js
@@ -1,12 +1,8 @@
 import { tags } from './hyperscript'
 import { sendEvent } from './events'
-const searchWithYourKeyboard = require('search-with-your-keyboard')
-const truncate = require('html-truncate')
-const languages = require('../lib/languages')
-const allVersions = require('../lib/all-versions')
-const nonEnterpriseDefaultVersion = require('../lib/non-enterprise-default-version')
+import searchWithYourKeyboard from 'search-with-your-keyboard'
+import truncate from 'html-truncate'
 
-const languageCodes = Object.keys(languages)
 const maxContentLength = 300
 
 let $searchInputContainer
@@ -29,8 +25,13 @@ export default function search () {
   $searchOverlay = document.querySelector('.search-overlay-desktop')
 
   // There's an index for every version/language combination
-  version = deriveVersionFromPath()
-  language = deriveLanguageCodeFromPath()
+  const {
+    languages,
+    versions,
+    nonEnterpriseDefaultVersion
+  } = JSON.parse(document.getElementById('search-options').text)
+  version = deriveVersionFromPath(versions, nonEnterpriseDefaultVersion)
+  language = deriveLanguageCodeFromPath(languages)
 
   // Find search placeholder text in a <meta> tag, falling back to a default
   const $placeholderMeta = document.querySelector('meta[name="site.data.ui.search.placeholder"]')
@@ -109,23 +110,16 @@ function closeSearch () {
   onSearch()
 }
 
-function deriveLanguageCodeFromPath () {
+function deriveLanguageCodeFromPath (languageCodes) {
   let languageCode = location.pathname.split('/')[1]
   if (!languageCodes.includes(languageCode)) languageCode = 'en'
   return languageCode
 }
 
-function deriveVersionFromPath () {
+function deriveVersionFromPath (allVersions, nonEnterpriseDefaultVersion) {
   // fall back to the non-enterprise default version (FPT currently) on the homepage, 404 page, etc.
   const versionStr = location.pathname.split('/')[2] || nonEnterpriseDefaultVersion
-  const versionObject = allVersions[versionStr] || allVersions[nonEnterpriseDefaultVersion]
-
-  // if GHES, returns the release number like 2.21, 2.22, etc.
-  // if FPT, returns 'dotcom'
-  // if GHAE, returns 'ghae'
-  return versionObject.plan === 'enterprise-server'
-    ? versionObject.currentRelease
-    : versionObject.miscBaseName
+  return allVersions[versionStr] || allVersions[nonEnterpriseDefaultVersion]
 }
 
 // Wait for the event to stop triggering for X milliseconds before responding
diff --git a/javascripts/wrap-code-terms.js b/javascripts/wrap-code-terms.js
@@ -1,8 +1,8 @@
+import escape from 'lodash/escape'
 const wordsLongerThan18Chars = /[\S]{18,}/g
 const camelCaseChars = /([a-z])([A-Z])/g
 const underscoresAfter12thChar = /([\w:]{12}[^_]*?)_/g
 const slashChars = /([/\\])/g
-const { escape } = require('lodash')
 
 // This module improves table rendering on reference pages by inserting a <wbr>
 // tag in code terms that use camelcase, slashes, or underscores, inspired by
diff --git a/lib/search/versions.js b/lib/search/versions.js
@@ -1,13 +1,14 @@
 const allVersions = require('../all-versions')
 
-module.exports = new Set(
-  Object.values(allVersions)
-    .map(version =>
+module.exports = Object.fromEntries(
+  Object.entries(allVersions)
+    .map(([versionStr, versionObject]) => [
+      versionStr,
       // if GHES, resolves to the release number like 2.21, 2.22, etc.
       // if FPT, resolves to 'dotcom'
       // if GHAE, resolves to 'ghae'
-      version.plan === 'enterprise-server'
-        ? version.currentRelease
-        : version.miscBaseName
-    )
+      versionObject.plan === 'enterprise-server'
+        ? versionObject.currentRelease
+        : versionObject.miscBaseName
+    ])
 )
diff --git a/middleware/context.js b/middleware/context.js
@@ -8,6 +8,8 @@ const productNames = require('../lib/product-names')
 const warmServer = require('../lib/warm-server')
 const featureFlags = Object.keys(require('../feature-flags'))
 const builtAssets = require('../lib/built-asset-urls')
+const searchVersions = require('../lib/search/versions')
+const nonEnterpriseDefaultVersion = require('../lib/non-enterprise-default-version')
 
 // Supply all route handlers with a baseline `req.context` object
 // Note that additional middleware in middleware/index.js adds to this context object
@@ -46,5 +48,12 @@ module.exports = async function contextualize (req, res, next) {
   // JS + CSS asset paths
   req.context.builtAssets = builtAssets
 
+  // Languages and versions for search
+  req.context.searchOptions = JSON.stringify({
+    languages: Object.keys(languages),
+    versions: searchVersions,
+    nonEnterpriseDefaultVersion
+  })
+
   return next()
 }
diff --git a/middleware/search.js b/middleware/search.js
@@ -1,6 +1,6 @@
 const express = require('express')
 const languages = new Set(Object.keys(require('../lib/languages')))
-const versions = require('../lib/search/versions')
+const versions = new Set(Object.values(require('../lib/search/versions')))
 const loadLunrResults = require('../lib/search/lunr-search')
 const loadAlgoliaResults = require('../lib/search/algolia-search')
 
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -31,7 +31,6 @@
     "browser-date-formatter": "^3.0.3",
     "change-case": "^3.1.0",
     "cheerio": "^1.0.0-rc.3",
-    "clipboard": "^2.0.6",
     "compression": "^1.7.4",
     "connect-datadog": "0.0.9",
     "connect-slashes": "^1.4.0",
@@ -73,7 +72,6 @@
     "morgan": "^1.9.1",
     "node-fetch": "^2.6.1",
     "parse5": "^6.0.1",
-    "platform-utils": "^1.2.0",
     "port-used": "^2.0.8",
     "rate-limit-redis": "^2.0.0",
     "react": "^17.0.1",
diff --git a/script/check-deps.js b/script/check-deps.js
@@ -43,12 +43,10 @@ const main = async () => {
       'webpack-cli',
       'browser-date-formatter',
       'html-truncate',
-      'platform-utils',
       'search-with-your-keyboard',
       'uuid',
       'imurmurhash',
       'js-cookie',
-      'clipboard',
       'mdast-util-from-markdown',
       'unist-util-visit'
     ]

Original file line number	Diff line number	Diff line change
`@@ -1 +1,2 @@`
	`1`	`+<script id="search-options" type="application/json">{{ searchOptions }}</script>`
`1`	`2`	`<script src="{{ builtAssets.main.js }}"></script>`