Skip to content

feat: lottie animations prefetching #32789

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
roryabraham merged 9 commits into from
Dec 23, 2023
Merged

feat: lottie animations prefetching #32789

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
fdb1128
feat: lottie animations prefetching
kosmydel Dec 11, 2023
31bc2ea
Merge branch 'main' into @kosmydel/lottie-prefetching
kosmydel Dec 12, 2023
22075a4
preload whole lottie player, to make it work offline
kosmydel Dec 12, 2023
a93ec81
add comments
kosmydel Dec 12, 2023
a252169
Merge branch 'main' into @kosmydel/lottie-prefetching
kosmydel Dec 15, 2023
7da7d9d
Merge branch 'main' into @kosmydel/lottie-prefetching
kosmydel Dec 18, 2023
3100653
use new prefetching library
kosmydel Dec 18, 2023
61e155f
remove patch
kosmydel Dec 18, 2023
89b0a77
Merge branch 'Expensify:main' into @kosmydel/lottie-prefetching
kosmydel Dec 21, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
21 changes: 18 additions & 3 deletions config/webpack/webpack.common.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 = [
Expand Down Expand Up @@ -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',
Expand Down Expand Up @@ -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)
Expand Down
Loading