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.

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

Jump to bottom

feat(exoflex): add babel plugin for rewriting imports #341

Closed
wants to merge 12 commits into from
Closed

feat(exoflex): add babel plugin for rewriting imports #341

wants to merge 12 commits into from

Conversation

darcien
Copy link
Member

@darcien darcien commented Feb 7, 2020

Mostly a port from the babel plugin in react-native-paper.

Original file:
https://github.com/callstack/react-native-paper/blob/5870fb3ef5fbb6aeb9aa95db942c1ac009e6a3b0/src/babel/index.js

Tried using it on the example project but can't seem to reduce the bundle size even when deleting some of the imports.

image

@darcien darcien added this to the exoflex v3.2.0 milestone Feb 7, 2020
@oshimayoan oshimayoan linked an issue Feb 7, 2020 that may be closed by this pull request
exoflex: babel-plugin #331
Open
@darcien
Copy link
Member Author

darcien commented Feb 14, 2020 •
edited

Tested with a fresh expo web project and du for checking the size:

du -sh web-build output:
- clean 1.3M
- with master exoflex {Calendar} babel-plugin=false 7.1M
- with master exoflex {Calendar} babel-plugin=true 7.1M
- with master exoflex {Calendar} sideEffects=false babel-plugin=false 5.7M
- with master exoflex {Calendar} sideEffects=false babel-plugin=true 5.7M
- with master exoflex {Provider, Text} babel-plugin=false 7.1M
- with master exoflex {Provider, Text} sideEffects=false babel-plugin=false 5.1M

exoflex installed with yarn link

@darcien
Copy link
Member Author

darcien commented Feb 14, 2020

Bonus, output from webpack-bundle-analyzer
image

@darcien
Copy link
Member Author

darcien commented Feb 14, 2020 •
edited

The sideEffects mentioned before is a property in the package.json.

The webpack 2 release came with built-in support for ES2015 modules (alias harmony modules) as well as unused module export detection. The new webpack 4 release expands on this capability with a way to provide hints to the compiler via the "sideEffects" package.json property to denote which files in your project are "pure" and therefore safe to prune if unused.
https://webpack.js.org/guides/tree-shaking/

@oshimayoan
Copy link
Contributor

@darcien I got a slightly different size from you.

`du -sh web-build` output:
- clean 1.0M
- with exoflex@3.1 {Provider, Text} no babel-plugin 6.6M
- with exoflex@3.1 {Provider, Text} babel-plugin-transform-imports 5.1M
- with exoflex@3.1 {Text} babel-plugin-transform-imports 5.0M

@oshimayoan
Copy link
Contributor

oshimayoan commented Feb 19, 2020 •
edited

Exoflex becomes a smaller piece, look at the red highlight.
image

@darcien
Copy link
Member Author

darcien commented Feb 19, 2020

@darcien I got a slightly different size from you.

`du -sh web-build` output:
- clean 1.0M
- with exoflex@3.1 {Provider, Text} no babel-plugin 6.6M
- with exoflex@3.1 {Provider, Text} babel-plugin-transform-imports 5.1M
- with exoflex@3.1 {Text} babel-plugin-transform-imports 5.0M

Oh, I'm using the master version, with yarn link, not from the npm

@oshimayoan
Copy link
Contributor

oshimayoan commented Feb 19, 2020 •
edited

I see. Have you test it on an Android bundle and check the APK size? Mine is not changing at all whether I use the plugin or not, it still at 49.5M which is pretty big for importing Provider and Text only.

EDIT:
I used expo to build the APK.

@oshimayoan
Copy link
Contributor

I've tried to build some APKs using ./gradlew assembleRelease and here's what I got:

All comparison is using exoflex@3.1 with {Provider, Text}.

No babel plugin:

du -sh app/build/outputs/apk/release/*.apk
 11M    app/build/outputs/apk/release/app-arm64-v8a-release.apk
 11M    app/build/outputs/apk/release/app-armeabi-v7a-release.apk
 24M    app/build/outputs/apk/release/app-universal-release.apk
 11M    app/build/outputs/apk/release/app-x86-release.apk
 11M    app/build/outputs/apk/release/app-x86_64-release.apk

Using react-native-paper/babel:

du -sh app/build/outputs/apk/release/*.apk
 11M    app/build/outputs/apk/release/app-arm64-v8a-release.apk
 11M    app/build/outputs/apk/release/app-armeabi-v7a-release.apk
 24M    app/build/outputs/apk/release/app-universal-release.apk
 11M    app/build/outputs/apk/release/app-x86-release.apk
 11M    app/build/outputs/apk/release/app-x86_64-release.apk

Using babel-plugin-transform-imports:

du -sh app/build/outputs/apk/release/*.apk
 10M    app/build/outputs/apk/release/app-arm64-v8a-release.apk
 10M    app/build/outputs/apk/release/app-armeabi-v7a-release.apk
 23M    app/build/outputs/apk/release/app-universal-release.apk
 10M    app/build/outputs/apk/release/app-x86-release.apk
 10M    app/build/outputs/apk/release/app-x86_64-release.apk

@oshimayoan
Copy link
Contributor

I wonder why using react-native-paper/babel doesn't have any effect on the APK size.

@darcien
Copy link
Member Author

darcien commented Feb 19, 2020

I wonder why using react-native-paper/babel doesn't have any effect on the APK size.

Have you tried using exoflex/babel? Using the babel plugin from paper won't have much effect to the code.

@oshimayoan
Copy link
Contributor

I haven't tried exoflex/babel yet. How do I use it?

@oshimayoan
Copy link
Contributor

Never mind, found it!

@darcien
Copy link
Member Author

darcien commented Feb 19, 2020 •
edited

I haven't tried exoflex/babel yet. How do I use it?

I forgot to tell you it's only available in this branch because it's a new feature 😆

@sstur
Copy link
Member

sstur commented Feb 21, 2020

a way to provide hints to the compiler via the "sideEffects" package.json property

This whole PR is awesome.

sstur
sstur approved these changes Feb 21, 2020
View reviewed changes
Copy link
Member

@sstur sstur left a comment

Choose a reason for hiding this comment

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

🚢 it!

packages/exoflex/scripts/generate-mappings.js
Comment on lines +10 to +19
const ast = parser.parse(source, {
sourceType: 'module',
plugins: [
'jsx',
'typescript',
'objectRestSpread',
'classProperties',
'asyncGenerators',
],
});
Copy link
Member

Choose a reason for hiding this comment

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

This is exactly what I need for the vision-ui source transformer! (although I need to use the typescript parser)

packages/exoflex/src/babel/__fixtures__/rewrite-imports/output.js
import { Provider as ExoflexProvider } from "exoflex/lib/module/components";
import { Button } from "exoflex/lib/module/components";
import { Label } from "exoflex/lib/module/components/Typography";
import { NonExistent, NonExistentSecond as Stuff } from "exoflex/lib/module/index.js";
Copy link
Member

Choose a reason for hiding this comment

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

Why is there a .js on the end of this line but not the others?

@oshimayoan oshimayoan modified the milestones: exoflex v3.3.0, exoflex v3.4.0 Mar 30, 2020
@oshimayoan oshimayoan removed this from the exoflex v3.4.0 milestone May 27, 2020
@darcien darcien closed this Feb 17, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@sstur sstur sstur approved these changes

Assignees
No one assigned
Labels
approved
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.

exoflex: babel-plugin
3 participants
@darcien @oshimayoan @sstur