Skip to content
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.

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

[AC-1971]: Use git submodule for uikit-react to reduce the bundle size #180

Merged
merged 21 commits into from
Apr 30, 2024

Conversation

AhyoungRyu
Copy link
Collaborator

@AhyoungRyu AhyoungRyu commented Apr 29, 2024

Key Changes:

  • Removed the @sendbird/uikit-react dependency from package.json.
  • Linked the necessary code from sendbird/uikit-react directly into the packages/uikit/ dir through a Git submodule. <- See .gitmodules file
  • Updated our build process(Github workflow / Circleci config) to initialize and update the Git submodule, ensuring that the latest version of the code is always used.

So how much of the bundle size would be reduced?
AS-IS
Screenshot 2024-04-29 at 5 55 49 PM

TO-BE
Screenshot 2024-04-29 at 5 50 40 PM

@AhyoungRyu AhyoungRyu self-assigned this Apr 29, 2024
package.json Outdated Show resolved Hide resolved
@AhyoungRyu AhyoungRyu changed the title feat: use git submodule for uikit-react to reduce the bundle size [AC-1971]: Use git submodule for uikit-react to reduce the bundle size Apr 29, 2024
@@ -1,7 +1,7 @@
import styled from 'styled-components';

import { getColorBasedOnSaturation } from '../colors';
import { ReactComponent as Icon } from '../icons/bot-profile-image-small.svg';
Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Why this format have to be changed?

  • Verbose to use
  • It causes a conflict with UIKit svg import type and throwing an error 🥲

@AhyoungRyu AhyoungRyu requested review from bang9 and liamcho April 29, 2024 09:43
@AhyoungRyu AhyoungRyu force-pushed the feat/tree-shaking branch 3 times, most recently from e7c8bdc to c3677ef Compare April 30, 2024 06:04
parserOptions: {
ecmaVersion: 'latest',
sourceType: 'module',
ecmaFeatures: { jsx: true },
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

jsx: ECMScript 규격의 JSX 사용 여부
^ is this relevant to reducing bundle size?

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Size reduce related? Not really but added in terms of better practice? \cc @bang9

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

before adding this was there an issue?

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I directly linked UIKit and set up path aliases, ensuring that files are processed correctly in ESLint as well.
But I can't remember why ecmaFeatures: { jsx: true } was enabled. 🙄

.eslintrc.cjs Outdated Show resolved Hide resolved
tsconfig.json Show resolved Hide resolved
vite.config.ts Outdated Show resolved Hide resolved
.gitmodules Show resolved Hide resolved
Copy link
Contributor

@liamcho liamcho left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Is terser the only change that reduced bundle size?

@AhyoungRyu
Copy link
Collaborator Author

Is terser the only change that reduced bundle size?

Yes :)

@AhyoungRyu AhyoungRyu requested a review from liamcho April 30, 2024 06:49
Copy link
Contributor

@liamcho liamcho left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM! Great job~

package.json Outdated Show resolved Hide resolved
* feat: connect on ChatAiWidget component mounting

* remove sdkInitParam

* Add comment about localStorage custom event

* Disconnect WS connection after 3min elapsed and reconnect on clicking widget button

* Disconnect WS connection after 3min elapsed and reconnect on clicking widget button

* SBComponent -> ProviderContainer

* Set defaultValue to useWidgetLocalStorage to prevent null reference error

* Create a separate WidgetWindowExternal

* Remove unnecessary type assertion

* Handle isWidgetOpen via Provider

* Split mobile & desktop component
@AhyoungRyu AhyoungRyu merged commit c27bd7f into develop Apr 30, 2024
@AhyoungRyu AhyoungRyu deleted the feat/tree-shaking branch April 30, 2024 10:11
@bang9 bang9 mentioned this pull request May 3, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants