Skip to content

Commit

Permalink
final test
Browse files Browse the repository at this point in the history
  • Loading branch information
@juliodialpad
juliodialpad committed Apr 17, 2024
1 parent a7fdd7a commit 63ba895
Show file tree
Hide file tree
Showing 2 changed files with 203 additions and 1 deletion.
6 changes: 5 additions & 1 deletion .github/workflows/send-blog-communications.yml
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,8 @@
name: Send blog communications
on:
pull_request:
types:
- synchronize
push:
branches:
- production
Expand Down Expand Up @@ -35,6 +38,7 @@ jobs:
run: echo '${{ steps.changed-files.outputs.added_files }}'

send-email:
if: false
name: Send email
runs-on: ubuntu-latest
needs: [added-posts]
Expand Down Expand Up @@ -142,5 +146,5 @@ jobs:
-H "Authorization: bearer ${{ steps.auth.outputs.id_token }}" \
-H "Content-Type: application/json" \
-d '{
"message": "New blog post: \"${{ env.BLOG_POST_HEADING }}\", read full article: ${{ env.POST_URL }}"
"message": "New blog post: \"${{ env.BLOG_POST_HEADING }}\". Read full article: ${{ env.POST_URL }}",
}'
198 changes: 198 additions & 0 deletions apps/dialtone-documentation/docs/about/whats-new/posts/2024-4-17.md
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,198 @@
---
heading: Added Tree-shaking support for dialtone-vue and dialtone-icons
author: Tico Ortega
posted: '2024-4-15'
---

<BlogPost :author="$frontmatter.author" :posted="parse($frontmatter.posted, 'y-M-d', new Date())" :heading="$frontmatter.heading">

# TL;DR:

- Improved dialtone-vue **bundle size**.
- Added **tree-shaking** support for dialtone-vue and dialtone icons.
- **Updated mono-package exports** (migration guide included)
- Now it's possible to **use icons from @dialpad/dialtone-icons directly**

<br/>

___

<br/>

**👋 Hey there,** we're excited to share some updates regarding the bundle size of dialtone-vue,
how to migrate to latest dialtone version as the exports changed and how can you use @dialpad/dialtone-icons library to
use isolated icons to avoid bundling a bunch of icons you're not using.

## Dialtone-vue bundle size

We've improved the dialtone-vue bundle size by externalizing all the dependencies that are not part of the library.

### Before

![dialtone vue bundle analysis before](/assets/images/bundle-analysis-before.png)
![dialtone vue bundle size before](/assets/images/bundle-size-before.png)

### After (without tree shaking)

![dialtone vue bundle analysis after, without tree shaking](/assets/images/bundle-analysis-after-without-treeshaking.png)
![dialtone vue bundle size after, without tree shaking](/assets/images/bundle-size-after-without-treeshaking.png)

### After (with tree shaking)

![dialtone vue bundle size after, with tree shaking](/assets/images/dialtone-vue-bundle-size-after-tree-shaking.png)

```bash
✓ 281 modules transformed.
dist/style.css 34.04 kB │ gzip: 5.80 kB
dist/chunks/dropdown_constants-EUcDxBrX.js 0.14 kB │ gzip: 0.15 kB │ map: 0.41 kB
dist/lib/emoji.js 0.35 kB │ gzip: 0.24 kB │ map: 0.10 kB
...
✓ built in 2.15s
```

## Migration to dialtone >=9.27.1

With the recent improvements, there are two ways of importing component from dialtone.

### Directly from the bundle.

- Pros
- Improved code readability as you can include multiple components on a single line.
- Treeshake works on vite+rollup with default config and can be improved with small changes to your [rollup config](https://rollupjs.org/configuration-options/#treeshake).
- Cons
- Doesn't treeshake the library if you're using webpack.

```js
import { DtButton, DtInput } from '@dialpad/dialtone/vue2'
```

### Importing the individual component.

- Pros
- Treeshake works on most bundlers without additional config as you're importing just what you need by default.
- Cons
- Makes the code a bit less readable and harder to maintain as you need to import every component individually.

```js
import { DtButton } from '@dialpad/dialtone/vue2/lib/button'
import { DtInput } from '@dialpad/dialtone/vue2/lib/input'
```

<small>Note: You can use [unplugin-auto-import](https://github.com/unplugin/unplugin-auto-import) to import the components automatically
to avoid having to import them manually.</small>

To migrate, replace any instances of the old imports with the corresponding new imports, please refer to the examples table below for clarity.

<div class="d-bb d-bc-default d-of-x-scroll">
<table class="d-table">
<thead>
<tr>
<th>Previous 👎</th>
<th>New 👍</th>
<th>Enable Tree shaking (best) ✨</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<code>import { DtEmoji } from '@dialpad/dialtone/vue2/emoji'</code>
</td>
<td>
<code>import { DtEmoji } from '@dialpad/dialtone/vue2'</code>
</td>
<td>
<code>import { DtEmoji } from '@dialpad/dialtone/vue2/lib/emoji.js'</code>
</td>
</tr>
<tr>
<td>
<code>import { DtMessageInput } from '@dialpad/dialtone/vue2/message_input'</code>
</td>
<td>
<code>import { DtMessageInput } from '@dialpad/dialtone/vue2'</code>
</td>
<td>
<code>import { DtMessageInput } from '@dialpad/dialtone/vue2/lib/message-input.js'</code>
</td>
</tr>
<tr>
<td>
<code>import { DtTooltipDirective } from '@dialpad/dialtone/vue2/directives'</code>
</td>
<td>
<code>import { DtTooltipDirective } from '@dialpad/dialtone/vue2'</code>
</td>
<td>
<code>import { DtTooltipDirective } from '@dialpad/dialtone/vue2/lib/tooltip-directive.js'</code>
</td>
</tr>
<tr>
<td>
<code>import SpotBlankSpace from '@dialpad/dialtone/dist/css/vue/spot/SpotBlankSpace'</code>
</td>
<td>
<code>import SpotBlankSpace from '@dialpad/dialtone/css/vue/spot/SpotBlankSpace.vue';</code>
</td>
<td>
-
</td>
</tr>
<tr>
<td>
<code>import { DtIcon } from '@dialpad/dialtone/vue2'</code>
</td>
<td>
<code>import { DtIcon } from '@dialpad/dialtone/vue2/icon';</code>
</td>
<td>
<code>import { DtIconAccessibility } from '@dialpad/dialtone-icons';</code>
</td>
</tr>
</tbody>
</table>
</div>

## Using dialtone-icons

Backwards-compatible support for DtIcon will remain for the near-term. However, we encourage you to begin updating your projects to the new dialtone-icons usage for a seamless and better experience.

Previously, to use an icon on your app you had to do:

```jsx
import { DtIcon } from '@dialpad/dialtone'

<dt-icon name="accessibility" size="300" />
```

This is going to change going forward to enable better tree shaking capabilities and a possible lazy-loading in the future to improve even more the load of your app.

As of dialtone components, there's also two ways of importing icons, with the same caveats and advantages as [importing components](#directly-from-the-bundle):

```jsx
import { DtIconAccessibility } from '@dialpad/dialtone-icons/vue2'
import { DtIconApple } from '@dialpad/dialtone-icons/vue2/apple'
```

use it as follows:

```jsx
<dt-icon-accessibility size="300" />
<dt-icon-apple size="600" />
```

This way, only the icons you import are going to be bundled on your package, improving bundle size, build and runtime performance.

## Got questions?

For more detailed information, read our [README.md](https://github.com/dialpad/dialtone/blob/staging/README.md#import-packages).

We're here to help! Reach out us in the `#dialtone` channel for any assistance you need.

Thanks for your patience and understanding,
Dialtone Team 💜
</BlogPost>

<script setup>
import BlogPost from '@baseComponents/BlogPost.vue';
import { parse } from 'date-fns';
</script>

0 comments on commit 63ba895

Please sign in to comment.