Merge pull request #32789 from software-mansion-labs/@kosmydel/lottie…

…-prefetching feat: lottie animations prefetching
Expensify · Dec 23, 2023 · b74be72 · b74be72
2 parents 85a5206 + 89b0a77
commit b74be72
Show file tree

Hide file tree

Showing 3 changed files with 85 additions and 498 deletions.
diff --git a/config/webpack/webpack.common.js b/config/webpack/webpack.common.js
@@ -6,7 +6,7 @@ const HtmlWebpackPlugin = require('html-webpack-plugin');
 const CopyPlugin = require('copy-webpack-plugin');
 const dotenv = require('dotenv');
 const {BundleAnalyzerPlugin} = require('webpack-bundle-analyzer');
-const FontPreloadPlugin = require('webpack-font-preload-plugin');
+const PreloadWebpackPlugin = require('@vue/preload-webpack-plugin');
 const CustomVersionFilePlugin = require('./CustomVersionFilePlugin');
 
 const includeModules = [
@@ -70,8 +70,17 @@ const webpackConfig = ({envFile = '.env', platform = 'web'}) => ({
             isProduction: envFile === '.env.production',
             isStaging: envFile === '.env.staging',
         }),
-        new FontPreloadPlugin({
-            extensions: ['woff2'],
+        new PreloadWebpackPlugin({
+            rel: 'preload',
+            as: 'font',
+            fileWhitelist: [/\.woff2$/],
+            include: 'allAssets',
+        }),
+        new PreloadWebpackPlugin({
+            rel: 'prefetch',
+            as: 'fetch',
+            fileWhitelist: [/\.lottie$/],
+            include: 'allAssets',
         }),
         new ProvidePlugin({
             process: 'process/browser',
@@ -234,6 +243,12 @@ const webpackConfig = ({envFile = '.env', platform = 'web'}) => ({
         runtimeChunk: 'single',
         splitChunks: {
             cacheGroups: {
+                // We have to load the whole lottie player to get the player to work in offline mode
+                lottiePlayer: {
+                    test: /[\\/]node_modules[\\/](@dotlottie\/react-player)[\\/]/,
+                    name: 'lottiePlayer',
+                    chunks: 'all',
+                },
                 // Extract all 3rd party dependencies (~75% of App) to separate js file
                 // This gives a more efficient caching - 3rd party deps don't change as often as main source
                 // When dependencies don't change webpack would produce the same js file (and content hash)