task(settings): Improve webpack chunking

Because:
- We can get better cache performance if things that don't change often are chunked into their own packages
- We can getter optimized network behavior with HTTP/2 and modern browsers by splitting up js files this way, ie multiple files can be downloaded concurrently.

This Commit:
- Creates a chunk for react and reach router called the 'presentation' chunk
- Creates a chunk for large utils like moment or ua-parser called utils
- Creates a chunk for observability libs like glean or sentry
- Creates a chunk for network libs like apollo and gql

Author: dschom

packages/fxa-settings/config/webpack.config.js

@@ -305,6 +305,30 @@ module.exports = function (webpackEnv) {
         // This is only used in production mode
         new CssMinimizerPlugin(),
       ],
+     splitChunks: isEnvProduction ? {
+        cacheGroups: {
+          presentation: {
+            test: /[\\/]node_modules[\\/]react|react-dom|@reach|@fluent[\\/]/,
+            name: 'presentation-chunk',
+            chunks: 'all',
+          },
+          utils: {
+            test: /[\\/]node_modules[\\/]moment|lodash|ua-parser-js[\\/]/,
+            name: 'utils-chunk',
+            chunks: 'all',
+          },
+          observability: {
+            test: /([\\/]node_modules[\\/]@sentry.*[\\/])|([\\/]glean[\\/])/,
+            name: 'observability-chunk',
+            chunks: 'all',
+          },
+          networking: {
+            test: /([\\/]node_modules[\\/]graphql|graphql-tag|@apollo.*[\\/])|([\\/]fxa-auth-client[\\/])/,
+            name: 'networking-chunk',
+            chunks: 'all',
+          },
+        },
+      } : {}
     },
     resolve: {
       // This allows you to set a fallback for where webpack should look for modules.