From cf903485197e6e94920a1d5e8ccffed0d25f34f6 Mon Sep 17 00:00:00 2001 From: Yen-chi Chen Date: Thu, 12 Dec 2024 13:38:33 +0800 Subject: [PATCH] feat: loadable component (#1364) --- package.json | 1 + .../Overview/SummaryBlock.js | 14 +++++++---- .../ExperienceDetail/ChartsZone/index.js | 10 ++++++-- src/components/LandingPage/SummarySection.js | 9 ++++++-- ...nChart.js => JobTitleDistributionChart.js} | 0 yarn.lock | 23 +++++++++++++++++++ 6 files changed, 49 insertions(+), 8 deletions(-) rename src/components/common/Charts/{JobTitleDistrubitionChart.js => JobTitleDistributionChart.js} (100%) diff --git a/package.json b/package.json index 5d3c35389..2cc289b2f 100644 --- a/package.json +++ b/package.json @@ -59,6 +59,7 @@ "@fortawesome/fontawesome": "^1.1.3", "@fortawesome/fontawesome-free-solid": "^5.0.6", "@fortawesome/react-fontawesome": "^0.0.17", + "@loadable/component": "^5.16.4", "airbnb-prop-types": "^2.15.0", "classnames": "^2.2.5", "date-fns": "^2.30.0", diff --git a/src/components/CompanyAndJobTitle/Overview/SummaryBlock.js b/src/components/CompanyAndJobTitle/Overview/SummaryBlock.js index 43fc0a8a6..a76bc3a78 100644 --- a/src/components/CompanyAndJobTitle/Overview/SummaryBlock.js +++ b/src/components/CompanyAndJobTitle/Overview/SummaryBlock.js @@ -1,11 +1,17 @@ import React from 'react'; import PropTypes from 'prop-types'; +import loadable from '@loadable/component'; -import SalaryDistributionChart from 'common/Charts/SalaryDistributionChart'; -import JobTitleDistrubitionChart from 'common/Charts/JobTitleDistrubitionChart'; import AverageWeekWorkTimeView from './AverageWeekWorkTimeView'; import styles from './SummaryBlock.module.css'; +const SalaryDistributionChart = loadable(() => + import('common/Charts/SalaryDistributionChart'), +); +const JobTitleDistributionChart = loadable(() => + import('common/Charts/JobTitleDistributionChart'), +); + const SummaryBlock = ({ salaryDistribution, jobAverageSalaries, @@ -26,10 +32,10 @@ const SummaryBlock = ({ {jobAverageSalaries && (
- +
- +
)} diff --git a/src/components/ExperienceDetail/ChartsZone/index.js b/src/components/ExperienceDetail/ChartsZone/index.js index 4a56f5551..692273b87 100644 --- a/src/components/ExperienceDetail/ChartsZone/index.js +++ b/src/components/ExperienceDetail/ChartsZone/index.js @@ -4,13 +4,19 @@ import cn from 'classnames'; import { generatePath } from 'react-router'; import R from 'ramda'; import ChartWrapper from '../../LandingPage/ChartWrapper'; -import SalaryDistributionChart from 'common/Charts/SalaryDistributionChart'; -import JobTitleDistributionChart from 'common/Charts/JobTitleDistrubitionChart'; +import loadable from '@loadable/component'; import styles from '../../LandingPage/SummarySection.module.css'; import moduleStyles from './ChartsZone.module.css'; const isEmptyOrNull = R.either(R.isEmpty, R.isNil); +const SalaryDistributionChart = loadable(() => + import('common/Charts/SalaryDistributionChart'), +); +const JobTitleDistributionChart = loadable(() => + import('common/Charts/JobTitleDistributionChart'), +); + const ChartsZone = ({ experience: { company: { diff --git a/src/components/LandingPage/SummarySection.js b/src/components/LandingPage/SummarySection.js index 6c32526e4..03e4d2a2d 100644 --- a/src/components/LandingPage/SummarySection.js +++ b/src/components/LandingPage/SummarySection.js @@ -1,11 +1,16 @@ import React, { useState, useMemo } from 'react'; import PropTypes from 'prop-types'; import { zip } from 'ramda'; +import loadable from '@loadable/component'; import Carousel, { CarouselPage } from 'common/Carousel'; import ChartWrapper from './ChartWrapper'; -import SalaryDistributionChart from 'common/Charts/SalaryDistributionChart'; -import JobTitleDistributionChart from 'common/Charts/JobTitleDistrubitionChart'; import styles from './SummarySection.module.css'; +const SalaryDistributionChart = loadable(() => + import('common/Charts/SalaryDistributionChart'), +); +const JobTitleDistributionChart = loadable(() => + import('common/Charts/JobTitleDistributionChart'), +); const SummarySection = ({ popularCompanyAverageSalary, diff --git a/src/components/common/Charts/JobTitleDistrubitionChart.js b/src/components/common/Charts/JobTitleDistributionChart.js similarity index 100% rename from src/components/common/Charts/JobTitleDistrubitionChart.js rename to src/components/common/Charts/JobTitleDistributionChart.js diff --git a/yarn.lock b/yarn.lock index deba5fb76..c8e501a70 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1254,6 +1254,13 @@ dependencies: regenerator-runtime "^0.13.4" +"@babel/runtime@^7.12.18": + version "7.24.6" + resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.24.6.tgz#5b76eb89ad45e2e4a0a8db54c456251469a3358e" + integrity sha512-Ja18XcETdEl5mzzACGd+DKgaGJzPTCow7EglgwTmHdwokzDFYh/MHua6lU6DV/hjF2IaOJ4oX2nqnjG7RElKOw== + dependencies: + regenerator-runtime "^0.14.0" + "@babel/runtime@^7.21.0": version "7.22.5" resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.22.5.tgz#8564dd588182ce0047d55d7a75e93921107b57ec" @@ -1607,6 +1614,15 @@ "@jridgewell/resolve-uri" "^3.1.0" "@jridgewell/sourcemap-codec" "^1.4.14" +"@loadable/component@^5.16.4": + version "5.16.4" + resolved "https://registry.yarnpkg.com/@loadable/component/-/component-5.16.4.tgz#583cb65945a5061ca3c6b90eb34835c154283ff4" + integrity sha512-fJWxx9b5WHX90QKmizo9B+es2so8DnBthI1mbflwCoOyvzEwxiZ/SVDCTtXEnHG72/kGBdzr297SSIekYtzSOQ== + dependencies: + "@babel/runtime" "^7.12.18" + hoist-non-react-statics "^3.3.1" + react-is "^16.12.0" + "@mrmlnc/readdir-enhanced@^2.2.1": version "2.2.1" resolved "https://registry.npmjs.org/@mrmlnc/readdir-enhanced/-/readdir-enhanced-2.2.1.tgz" @@ -6296,6 +6312,13 @@ hoist-non-react-statics@^3.3.0: dependencies: react-is "^16.7.0" +hoist-non-react-statics@^3.3.1: + version "3.3.2" + resolved "https://registry.yarnpkg.com/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz#ece0acaf71d62c2969c2ec59feff42a4b1a85b45" + integrity sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw== + dependencies: + react-is "^16.7.0" + hosted-git-info@^2.1.4: version "2.8.9" resolved "https://registry.npmjs.org/hosted-git-info/-/hosted-git-info-2.8.9.tgz"