@financial-times/dotcom-build-code-splitting 7.3.1 → 7.3.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@financial-times/dotcom-build-code-splitting",
-  "version": "7.3.1",
+  "version": "7.3.2",
   "description": "",
   "main": "dist/node/index.js",
   "types": "src/index.ts",
@@ -36,7 +36,8 @@
     "npm": "7.x || 8.x"
   },
   "files": [
-    "dist/"
+    "dist/",
+    "src/"
   ],
   "repository": {
     "type": "git",

package/src/__test__/__fixtures__/@financial-times/privacy-module-1/index.js

@@ -0,0 +1,3 @@
+exports.privacy1 = function() {
+  return 'module-privacy-1-' + Date.now()
+}

package/src/__test__/__fixtures__/@financial-times/privacy-module-1/package.json

@@ -0,0 +1,4 @@
+{
+  "name": "privacy-module-1",
+  "main": "index.js"
+}

package/src/__test__/__fixtures__/@financial-times/privacy-module-2/index.js

@@ -0,0 +1,3 @@
+exports.privacy2 = function() {
+  return 'module-privacy-2-' + Date.now()
+}

package/src/__test__/__fixtures__/@financial-times/privacy-module-2/package.json

@@ -0,0 +1,4 @@
+{
+  "name": "privacy-module-2",
+  "main": "index.js"
+}

package/src/__test__/__fixtures__/entry-point.js

@@ -0,0 +1,4 @@
+const { privacy1 } = require('./@financial-times/privacy-module-1');
+const { privacy2 } = require('./@financial-times/privacy-module-2');
+
+console.log(privacy1(), privacy2())

package/src/__test__/index.spec.ts

@@ -0,0 +1,36 @@
+import { PageKitCodeSplittingPlugin } from '../index'
+import webpack from 'webpack'
+import path from 'path'
+
+describe('dotcom-build-code-splitting', () => {
+  it('create chunk for privacy modules', async () => {
+    await new Promise((resolve) =>
+      webpack(
+        {
+          mode: 'none',
+          entry: {
+            scripts: path.join(__dirname, '/__fixtures__', 'entry-point.js')
+          },
+          output: {
+            filename: '[name].js',
+            path: path.join(__dirname, '/tmp')
+          },
+          plugins: [new PageKitCodeSplittingPlugin()]
+        },
+        function (error, stats) {
+          if (error) {
+            throw error
+          } else if (stats.hasErrors()) {
+            throw stats.toString()
+          }
+
+          const files = stats.toJson().assets.map((asset) => asset.name)
+
+          expect(files).toEqual(expect.arrayContaining(['privacy-components.js']))
+
+          resolve()
+        }
+      )
+    )
+  })
+})

package/src/bundleTypes.ts

@@ -0,0 +1,168 @@
+import extractPackageName from './extractPackageName'
+import createSafeChunkName from './createSafeChunkName'
+import DisableTreeShakingForChunk from 'disable-tree-shaking-for-chunk-plugin'
+import type webpack from 'webpack'
+
+interface IBundleWithPackageNames {
+  compiler: webpack.Compiler
+  name: string
+  packages: string[]
+  // This prevents the tracking of named exports and their usage
+  usedInUnknownWay?: boolean
+}
+
+interface IBundleWithRegExp {
+  compiler: webpack.Compiler
+  name: string
+  pattern: RegExp
+  // This prevents the tracking of named exports and their usage
+  usedInUnknownWay?: boolean
+}
+
+const isJS = (module) => module.type && module.type.startsWith('javascript/')
+
+/**
+ * Create a chunk which includes all packages in the given list of names
+ */
+export function createBundleWithPackages({
+  compiler,
+  name,
+  packages,
+  usedInUnknownWay
+}: IBundleWithPackageNames) {
+  if (usedInUnknownWay) {
+    const disableTreeShakingPlugin = new DisableTreeShakingForChunk({
+      test: name
+    })
+
+    disableTreeShakingPlugin.apply(compiler)
+  }
+
+  return {
+    optimization: {
+      splitChunks: {
+        cacheGroups: {
+          [name]: {
+            name,
+            test: (module) => {
+              const packageName = isJS(module) && extractPackageName(module.context)
+              return packageName ? packages.includes(packageName) : false
+            },
+            enforce: true
+          }
+        }
+      }
+    }
+  }
+}
+
+/**
+ * Create a chunk which includes all modules which match the given pattern
+ */
+export function createBundleWithRegExp({ compiler, name, pattern, usedInUnknownWay }: IBundleWithRegExp) {
+  if (usedInUnknownWay) {
+    const disableTreeShakingPlugin = new DisableTreeShakingForChunk({
+      test: name
+    })
+
+    disableTreeShakingPlugin.apply(compiler)
+  }
+
+  return {
+    optimization: {
+      splitChunks: {
+        cacheGroups: {
+          [name]: {
+            name,
+            test: (module) => {
+              return isJS(module) && pattern.test(module.context)
+            },
+            enforce: true
+          }
+        }
+      }
+    }
+  }
+}
+
+/**
+ * Create a chunk for each package in the given list of names
+ */
+export function createBundlesForPackages({
+  compiler,
+  name,
+  packages,
+  usedInUnknownWay
+}: IBundleWithPackageNames) {
+  const generatedChunkNames = new Set()
+
+  if (usedInUnknownWay) {
+    const disableTreeShakingPlugin = new DisableTreeShakingForChunk({
+      test: generatedChunkNames
+    })
+
+    disableTreeShakingPlugin.apply(compiler)
+  }
+
+  return {
+    optimization: {
+      splitChunks: {
+        cacheGroups: {
+          [name]: {
+            name(module) {
+              const packageName = extractPackageName(module.context)
+              const chunkName = createSafeChunkName(packageName)
+
+              generatedChunkNames.add(chunkName)
+
+              return chunkName
+            },
+            test(module) {
+              const packageName = isJS(module) && extractPackageName(module.context)
+              return packageName ? packages.includes(packageName) : false
+            },
+            enforce: true
+          }
+        }
+      }
+    }
+  }
+}
+
+/**
+ * Create a chunk for each group of modules which match the given pattern
+ */
+export function createBundlesForRegExp({ compiler, name, pattern, usedInUnknownWay }: IBundleWithRegExp) {
+  const generatedChunkNames = new Set()
+
+  if (usedInUnknownWay) {
+    const disableTreeShakingPlugin = new DisableTreeShakingForChunk({
+      test: generatedChunkNames
+    })
+
+    disableTreeShakingPlugin.apply(compiler)
+  }
+
+  return {
+    optimization: {
+      splitChunks: {
+        cacheGroups: {
+          [name]: {
+            name(module) {
+              const packageName = extractPackageName(module.context)
+              const chunkName = createSafeChunkName(packageName)
+
+              generatedChunkNames.add(chunkName)
+
+              return chunkName
+            },
+            test(module) {
+              return isJS(module) && pattern.test(module.context)
+            },
+            enforce: true
+          }
+        }
+      }
+    }
+  }
+}

package/src/createSafeChunkName.ts

@@ -0,0 +1,4 @@
+export default function createSafeChunkName(name: string) {
+  // Remove or replace any non-safe filename characters
+  return name.replace('@', '').replace('/', '-')
+}

package/src/extractPackageName.ts

@@ -0,0 +1,12 @@
+import memoize from 'memoize-one'
+import getPackageName from 'get-package-name'
+
+const moduleType = /(node_modules)/
+
+function extractPackageName(modulePath: string) {
+  const type = modulePath.match(moduleType)
+  return Array.isArray(type) ? getPackageName(modulePath, type[type.length - 1]) : null
+}
+
+// Memoize these calls as modules often need to be resolved many times.
+export default memoize(extractPackageName)

package/src/index.ts

@@ -0,0 +1,109 @@
+import assignDeep from 'assign-deep'
+import ReliableModuleIdsPlugin from 'reliable-module-ids-plugin'
+import type webpack from 'webpack'
+
+import {
+  createBundleWithPackages,
+  createBundleWithRegExp,
+  createBundlesForPackages,
+  createBundlesForRegExp
+} from './bundleTypes'
+
+export class PageKitCodeSplittingPlugin {
+  apply(compiler: webpack.Compiler) {
+    const addInitialCodeSplitting = {
+      optimization: {
+        // Creates a separate bundle for webpack runtime.
+        // Specifying the name prevents multiple runtime bundles from being created.
+        runtimeChunk: {
+          name: 'webpack-runtime'
+        },
+        splitChunks: {
+          chunks: 'all'
+        },
+        // We're going to implement our own algorithm so don't double effort
+        moduleIds: false,
+        chunkIds: 'named'
+      }
+    }
+
+    // Split each o-, n-, x- and next- prefixed packages into a separate bundles
+    // NOTE: we need to check we're in a package directory as our apps are usually prefixed with "next-"
+    const addComponentCodeSplitting = createBundlesForRegExp({
+      compiler,
+      name: 'shared-components',
+      pattern: /(node_modules\/@financial-times)\/(o|n|x|next)-/,
+      usedInUnknownWay: true
+    })
+
+    // split all dotcom-ui- packages into one bundle file
+    const addPageKitCodeSplittingPlugin = createBundleWithRegExp({
+      compiler,
+      name: 'page-kit-components',
+      pattern: /[\\\/]dotcom-ui-/,
+      usedInUnknownWay: true
+    })
+
+    // split any of these JS frameworks and libraries into separate bundle files
+    const addLibraryCodeSplitting = createBundlesForPackages({
+      compiler,
+      name: 'js-frameworks',
+      packages: ['react', 'preact', 'hyperons', 'dateformat', 'regenerator-runtime']
+    })
+
+    // These packages are a dependency of ads, marketing, MyFT, syndication, cookie banners
+    // and other components but they are not all dependencies of our apps.
+    const addSuperstoreCodeSplitting = createBundleWithPackages({
+      compiler,
+      name: 'superstore',
+      packages: ['superstore', 'superstore-sync'],
+      usedInUnknownWay: true
+    })
+
+    // split all privacy- packages into one bundle file
+    const addPrivacyCodeSplitting = createBundleWithRegExp({
+      compiler,
+      name: 'privacy-components',
+      pattern: /@financial-times\/privacy-/,
+      usedInUnknownWay: true
+    })
+
+    // split packages used by all pages (i.e. used by Page Kit) into a shared bundle
+    const addSharedStableCodeSplitting = createBundleWithPackages({
+      compiler,
+      name: 'shared.stable',
+      packages: [
+        'focus-visible',
+        'fontfaceobserver',
+        'ftdomdelegate',
+        'morphdom',
+        'n-topic-search',
+        'n-ui-foundations',
+        'ready-state'
+      ],
+      usedInUnknownWay: true
+    })
+
+    // split packages which are commonly used together around FT.com into a shared bundle
+    const addSharedVolatileCodeSplitting = createBundleWithPackages({
+      compiler,
+      name: 'shared.volatile',
+      packages: ['@financial-times/n-ads', '@financial-times/n-tracking', 'n-syndication', 'n-feedback'],
+      usedInUnknownWay: true
+    })
+
+    new ReliableModuleIdsPlugin().apply(compiler)
+
+    assignDeep(
+      compiler.options,
+      addInitialCodeSplitting,
+      addPageKitCodeSplittingPlugin,
+      addLibraryCodeSplitting,
+      addComponentCodeSplitting,
+      addSuperstoreCodeSplitting,
+      addPrivacyCodeSplitting,
+      addSharedStableCodeSplitting,
+      addSharedVolatileCodeSplitting
+    )
+  }
+}