wednesday-solutions · christin-wednesday · Apr 29, 2022 · May 1, 2022 · May 1, 2022
diff --git a/app/app.tsx b/app/app.tsx
@@ -4,55 +4,24 @@
  * This is the entry file for the application, only setup and boilerplate
  * code.
  */
-
-// Needed for redux-saga es6 generator support
-// Import all the third party stuff
-import React from 'react';
-import ReactDOM from 'react-dom';
-import { Provider } from 'react-redux';
-import { PersistGate } from 'redux-persist/integration/react';
-import history from '@utils/history';
-import 'sanitize.css/sanitize.css';
-
-// Import root app
-import App from '@containers/App';
-
-// Import Language Provider
-import LanguageProvider from '@containers/LanguageProvider';
-import ErrorBoundary from '@components/ErrorBoundary';
-import ScrollToTop from '@components/ScrollToTop';
-// Load the favicon and the .htaccess file
-/* eslint-disable import/no-unresolved, import/extensions */
 import '!file-loader?name=[name].[ext]!./images/favicon.ico';
 import 'file-loader?name=.htaccess!./.htaccess';
-/* eslint-enable import/no-unresolved, import/extensions */
+import 'sanitize.css/sanitize.css';
 
-import configureStore from './configureStore';
+import Providers from '@components/Providers';
+import App from '@containers/App/loadable';
+import React from 'react';
+import ReactDOM from 'react-dom';
 
-// Import i18n messages
 import { translationMessages } from './i18n';
-import { Router } from 'react-router-dom';
 
-// Create redux store with history
-const initialState = {};
-const { store, persistor } = configureStore(initialState);
 const MOUNT_NODE = document.getElementById('app');
 
 const render = (messages: typeof translationMessages) => {
   ReactDOM.render(
-    <ErrorBoundary>
-      <Provider store={store}>
-        <PersistGate loading={null} persistor={persistor}>
-          <LanguageProvider messages={messages}>
-            <Router history={history}>
-              <ScrollToTop>
-                <App />
-              </ScrollToTop>
-            </Router>
-          </LanguageProvider>
-        </PersistGate>
-      </Provider>
-    </ErrorBoundary>,
+    <Providers messages={messages}>
+      <App />
+    </Providers>,
     MOUNT_NODE
   );
 };

diff --git a/app/components/LaunchItem/index.tsx b/app/components/LaunchItem/index.tsx
@@ -9,7 +9,7 @@ import isEmpty from 'lodash-es/isEmpty';
 import { colors } from '@app/themes';
 import { GlobalOutlined } from '@ant-design/icons';
 import history from '@app/utils/history';
-import { format } from 'date-fns';
+import format from 'date-fns/format';
 
 const LaunchCard = styled(Card)`
   && {

diff --git a/app/components/LaunchList/index.tsx b/app/components/LaunchList/index.tsx
@@ -2,7 +2,8 @@ import React, { memo } from 'react';
 import PropTypes from 'prop-types';
 import styled from 'styled-components';
 import { Launch } from '@containers/HomeContainer';
-import { get, isEmpty } from 'lodash-es';
+import get from 'lodash-es/get';
+import isEmpty from 'lodash-es/isEmpty';
 import { Card, Skeleton } from 'antd';
 import { If, T, For, LaunchItem } from '@components';
 import { colors } from '@app/themes';

diff --git a/app/components/Providers/index.tsx b/app/components/Providers/index.tsx
@@ -0,0 +1,44 @@
+import ErrorBoundary from '@components/ErrorBoundary';
+import ScrollToTop from '@components/ScrollToTop';
+import LanguageProvider from '@containers/LanguageProvider';
+import history from '@utils/history';
+import PropTypes from 'prop-types';
+import React, { ReactNode, Suspense } from 'react';
+import { Provider } from 'react-redux';
+import { Router } from 'react-router-dom';
+import { PersistGate } from 'redux-persist/integration/react';
+
+import configureStore from '../../configureStore';
+
+type Props = {
+  messages: any;
+  children: ReactNode;
+};
+
+const initialState = {};
+const { store, persistor } = configureStore(initialState);
+
+const Providers: React.FC<Props> = ({ children, messages }) => {
+  return (
+    <Suspense fallback={'...loading'}>
+      <ErrorBoundary>
+        <Provider store={store}>
+          <PersistGate loading={null} persistor={persistor}>
+            <LanguageProvider messages={messages}>
+              <Router history={history}>
+                <ScrollToTop> {children}</ScrollToTop>
+              </Router>
+            </LanguageProvider>
+          </PersistGate>
+        </Provider>
+      </ErrorBoundary>
+    </Suspense>
+  );
+};
+
+Providers.propTypes = {
+  children: PropTypes.node.isRequired,
+  messages: PropTypes.any
+};
+
+export default Providers;
diff --git a/app/containers/App/loadable.ts b/app/containers/App/loadable.ts
@@ -0,0 +1,3 @@
+import loadable from '@utils/loadable';
+
+export default loadable(() => import('./index'));
diff --git a/app/containers/HomeContainer/index.tsx b/app/containers/HomeContainer/index.tsx
@@ -60,7 +60,9 @@ const ButtonBox = styled.div`
 const SortSelect = styled(Select)`
   && {
     width: 9.5rem;
-    background-color: #fff;
+    .ant-select-selector {
+      background-color: ${colors.primary};
+    }
 
     ${media.lessThan('tablet')`
       flex: 1;

diff --git a/app/containers/HomeContainer/tests/__snapshots__/index.test.tsx.snap b/app/containers/HomeContainer/tests/__snapshots__/index.test.tsx.snap
@@ -48,7 +48,7 @@ exports[`<HomeContainer /> tests should render and match the snapshot 1`] = `
           class="HomeContainer__ButtonBox-wd79o1-3 htscFM"
         >
           <button
-            class="ant-btn"
+            class="ant-btn ant-btn-default"
             data-testid="clear-sort"
             disabled=""
             type="button"
@@ -58,7 +58,7 @@ exports[`<HomeContainer /> tests should render and match the snapshot 1`] = `
             </span>
           </button>
           <div
-            class="ant-select HomeContainer__SortSelect-wd79o1-4 jnsQrO ant-select-single ant-select-show-arrow"
+            class="ant-select HomeContainer__SortSelect-wd79o1-4 dPrvPO ant-select-single ant-select-show-arrow"
             data-testid="sort-select"
           >
             <div

diff --git a/app/containers/LanguageProvider/loadable.ts b/app/containers/LanguageProvider/loadable.ts
@@ -0,0 +1,3 @@
+import loadable from '@utils/loadable';
+
+export default loadable(() => import('./index'));
diff --git a/app/index.html b/app/index.html
@@ -11,7 +11,14 @@
     <meta name="mobile-web-app-capable" content="yes" />
     <link rel="preconnect" href="https://fonts.googleapis.com" />
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
-    <link href="https://fonts.googleapis.com/css2?family=Rubik:wght@400;500;700&display=swap" rel="stylesheet" />
+    <link
+      rel="preload"
+      as="font"
+      href="https://fonts.googleapis.com/css2?family=Rubik:wght@400;500;700&display=swap"
+      type="font/woff2"
+      crossorigin="anonymous"
+    />
+
     <title>React Template</title>
     <link rel="stylesheet/less" type="text/css" href="antd/dist/antd.less" />
   </head>

diff --git a/babel.config.js b/babel.config.js
@@ -28,7 +28,7 @@ module.exports = {
         'transform-react-remove-prop-types',
         '@babel/plugin-transform-react-inline-elements',
         '@babel/plugin-transform-react-constant-elements',
-        ['import', { libraryName: 'antd', libraryDirectory: 'es', style: true }, 'antd'],
+        ['import', { libraryName: 'antd', libraryDirectory: 'es', style: 'css' }, 'antd'],
         [
           'import',
           {

diff --git a/internals/scripts/analyze.js b/internals/scripts/analyze.js
@@ -9,7 +9,7 @@ const progress = animateProgress('Generating stats');
 
 // Generate stats.json file with webpack
 shelljs.exec(
-  'webpack --config internals/webpack/webpack.config.prod.babel.js --profile --json > stats.json',
+  'export ENVIRONMENT_NAME=production NODE_ENV=production && webpack --config internals/webpack/webpack.config.prod.js --profile --json > stats.json',
   addCheckMark.bind(null, callback), // Output a checkmark on completion
 );
 

diff --git a/internals/webpack/webpack.config.base.js b/internals/webpack/webpack.config.base.js
@@ -5,9 +5,12 @@ const path = require('path');
 const webpack = require('webpack');
 const dotenv = require('dotenv');
 const colors = require('../../app/themes/colors');
+const MiniCssExtractPlugin = require('mini-css-extract-plugin');
+const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
 
+const isDev = process.env.NODE_ENV !== 'production';
 const dotEnvFile = process.env.ENVIRONMENT_NAME === 'production' ? `.env` : `.env.${process.env.ENVIRONMENT_NAME}`;
-const env = dotenv.config({ path: dotEnvFile }).parsed;
+const env = dotenv.config({ path: dotEnvFile }).parsed || {};
 const envKeys = {
   ...Object.keys(process.env).reduce((prev, next) => {
     prev[`process.env.${next}`] = JSON.stringify(process.env[next]);
@@ -42,18 +45,20 @@ module.exports = (options) => ({
           }
         ]
       },
+      // {
+      //   test: /\.css$/,
+      //   exclude: /node_modules/,
+      //   use: [isDev ? 'style-loader' : MiniCssExtractPlugin.loader, 'css-loader']
+      // },
       {
-        // Preprocess our own .css files
-        // This is the place to add your own loaders (e.g. sass/less etc.)
-        // for a list of loaders, see https://webpack.js.org/loaders/#styling
+        // Preprocess 3rd party .css files located in node_modules
         test: /\.css$/,
-        exclude: /node_modules/,
-        use: ['style-loader', 'css-loader']
+        use: [isDev ? 'style-loader' : MiniCssExtractPlugin.loader, 'css-loader']
       },
       {
         test: /\.less$/,
         use: [
-          'style-loader',
+          isDev ? 'style-loader' : MiniCssExtractPlugin.loader,
           'css-loader',
           {
             loader: 'less-loader',
@@ -76,62 +81,61 @@ module.exports = (options) => ({
           }
         ]
       },
-      {
-        // Preprocess 3rd party .css files located in node_modules
-        test: /\.css$/,
-        include: /node_modules/,
-        use: ['style-loader', 'css-loader']
-      },
       {
         test: /\.(eot|otf|ttf|woff|woff2)$/,
         use: 'file-loader'
       },
+      // {
+      //   test: /\.svg$/,
+      //   use: [
+      //     {
+      //       loader: 'svg-url-loader',
+      //       options: {
+      //         // Inline files smaller than 10 kB
+      //         limit: 10 * 1024,
+      //         noquotes: true
+      //       }
+      //     }
+      //   ]
+      // },
+      // {
+      //   test: /\.(jpg|png|gif)$/,
+      //   use: [
+      //     {
+      //       loader: 'url-loader',
+      //       options: {
+      //         // Inline files smaller than 10 kB
+      //         limit: 10 * 1024
+      //       }
+      //     },
+      //     {
+      //       loader: 'image-webpack-loader',
+      //       options: {
+      //         mozjpeg: {
+      //           enabled: false
+      //           // NOTE: mozjpeg is disabled as it causes errors in some Linux environments
+      //           // Try enabling it in your environment by switching the config to:
+      //           // enabled: true,
+      //           // progressive: true,
+      //         },
+      //         gifsicle: {
+      //           interlaced: false
+      //         },
+      //         optipng: {
+      //           optimizationLevel: 7
+      //         },
+      //         pngquant: {
+      //           quality: [0.65, 0.9],
+      //           speed: 4
+      //         }
+      //       }
+      //     }
+      //   ]
+      // },
       {
-        test: /\.svg$/,
-        use: [
-          {
-            loader: 'svg-url-loader',
-            options: {
-              // Inline files smaller than 10 kB
-              limit: 10 * 1024,
-              noquotes: true
-            }
-          }
-        ]
-      },
-      {
-        test: /\.(jpg|png|gif)$/,
-        use: [
-          {
-            loader: 'url-loader',
-            options: {
-              // Inline files smaller than 10 kB
-              limit: 10 * 1024
-            }
-          },
-          {
-            loader: 'image-webpack-loader',
-            options: {
-              mozjpeg: {
-                enabled: false
-                // NOTE: mozjpeg is disabled as it causes errors in some Linux environments
-                // Try enabling it in your environment by switching the config to:
-                // enabled: true,
-                // progressive: true,
-              },
-              gifsicle: {
-                interlaced: false
-              },
-              optipng: {
-                optimizationLevel: 7
-              },
-              pngquant: {
-                quality: [0.65, 0.9],
-                speed: 4
-              }
-            }
-          }
-        ]
+        test: /\.(png|svg|jpg|jpeg|gif)$/i,
+
+        type: 'asset/resource'
       },
       {
         test: /\.html$/,
@@ -153,9 +157,10 @@ module.exports = (options) => ({
     // inside your code for any environment checks; Terser will automatically
     // drop any unreachable code.
     new webpack.EnvironmentPlugin({
-      NODE_ENV: 'development'
+      NODE_ENV: process.env.NODE_ENV
     }),
-    new webpack.DefinePlugin(envKeys)
+    new webpack.DefinePlugin(envKeys),
+    ...(process.env.ANALYZE_BUNDLE === 'true' ? [new BundleAnalyzerPlugin()] : [])
   ]),
   resolve: {
     modules: ['node_modules', 'app'],

diff --git a/internals/webpack/webpack.config.dev.js b/internals/webpack/webpack.config.dev.js
@@ -6,7 +6,6 @@ const path = require('path');
 const webpack = require('webpack');
 const HtmlWebpackPlugin = require('html-webpack-plugin');
 const CircularDependencyPlugin = require('circular-dependency-plugin');
-const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
 
 module.exports = require('./webpack.config.base')({
   mode: 'development',
@@ -39,8 +38,7 @@ module.exports = require('./webpack.config.base')({
     new CircularDependencyPlugin({
       exclude: /a\.js|node_modules/, // exclude node_modules
       failOnError: false // show a warning when there is a circular dependency
-    }),
-    new BundleAnalyzerPlugin()
+    })
   ],
 
   // Emit a source map for easier debugging
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,3 @@
		import loadable from '@utils/loadable';

		export default loadable(() => import('./index'));