タグ検索の該当結果が少ないため、タイトル検索結果を表示しています。
TypeScriptのenumを使わないほうがいい理由を、Tree-shakingの観点で紹介します
LINE株式会社は、2023年10月1日にLINEヤフー株式会社になりました。LINEヤフー株式会社の新しいブログはこちらです。 LINEヤフー Tech Blog こんにちは。LINE Growth Technology UITチームの慶島(@pittanko_pta)です。 この記事では、TypeScriptのenumを使わないほうがいい理由を、Tree-shakingの観点で紹介します。 検証環境 TypeScriptからJavaScriptへのトランスパイルは https://www.typescriptlang.org/play (TypeScript 3.9.2 / targetはESNext) で行いました。 Tree-shaking の挙動については https://rollupjs.org/repl/ にトランスパイルしたJavaScriptコードを貼り付けて検証しました
この記事では TypeScript かつフロントエンドで動作する環境を想定しています。 そのため、この記事の内容は主にフロントエンドからの視点として見て頂ければ幸いです。 結論 Tree Shaking に対応してないライブラリを使っているソースコードで re-export を使用していると、不用意にファイルサイズを大きくしてしまう可能性があります。そのため、対応してないライブラリを使用している状況下である場合 ( またはそのような状況になりそうな場合 ) には、re-export などを使用せずに 信頼できる唯一の情報源 に従った方が良いと思います。 どうしても re-export 使用したい場合、副作用があるファイルが分かっているのであれば、sideEffects オプションを使用することで影響を最小限に抑えることができます 👇
Tree-Shaking: A Reference Guide — Smashing Magazine
“Tree-shaking” is a must-have performance optimization when bundling JavaScript. In this article, we dive deeper on how exactly it works and how specs and practice intertwine to make bundles leaner and more performant. Plus, you’ll get a tree-shaking checklist to use for your projects. Before starting our journey to learn what tree-shaking is and how to set ourselves up for success with it, we nee
How to Use Multiple GitHub Accounts Git is a popular tool for version control in software development. It is not uncommon to use multiple Git accounts. Correctly configuring and switching Git accounts is challenging. In this article, we show what Git provides for account configuration, its limitations, and the solution to switch accounts automatically based on a project parent directory location.
IntroA few months back I was tasked with upgrading my team’s React build configuration to Webpack 4. One of our main goals was to take advantage of tree-shaking, where Webpack strips out code that you’re not actually using to reduce your bundle size. Now, the benefits of tree shaking will vary depending on your codebase. Because of several architectural decisions in ours, we had a LOT of code bein
In the JavaScript world, the term tree-shaking refers to the removal of dead code. But this terminology is not limited to JavaScript, the word “tree-shaking” comes from Lisp Community in the 1990s. Thanks to Axel Rauschmayer, who turns himself into Indiana jones and find the exact origin of this word on Twitter. When I first heard about this topic, I was so excited to learn about tree-shaking. So
Tree-shaking and code-splitting are two techniques to reduce the size of JavaScript bundles in web applications. Code-splitting is bundling your code in a way so that it’s grouped into many small bundles that can be loaded as they are needed. Tree-shaking is the process of removing unused code during the bundle process. The Civic Apps team has embraced the methods provided by React to implement co
Tree-Shaking
Say hello to Web Awesome, the biggest and best library of open-source web components. Use tree-shaking to automatically subset and include only the icons you’re using. Beginning with the excellent tool Rollup.js by Rich Harris, the concept of tree-shaking attempts to eliminate any unused code. Webpack 2 now includes this as well. Using Font Awesome with Tree-shaking The Font Awesome icon packages
📦 Parcel 2 beta 1: improved stability, tree shaking, source map performance, and more! 🚀
The Parcel team is super excited to release the first beta of Parcel 2 today! This marks the first Parcel 2 release that’s more stable than our nightly and alpha releases, and our commitment to avoid changing most user facing APIs. Please try it out and give us your feedback on Github! It’s been a while since our last alpha release, and there has been a ton of active development on Parcel 2 in the
TypeScriptのenumを使わないほうがいい理由を、Tree-shakingの観点で紹介します
LINE株式会社は、2023年10月1日にLINEヤフー株式会社になりました。LINEヤフー株式会社の新しいブログはこちらです。 LINEヤフー Tech Blog こんにちは。LINE Growth Technology UITチームの慶島(@pittanko_pta)です。 この記事では、TypeScriptのenumを使わないほうがいい理由を、Tree-shakingの観点で紹介します。 検証環境 TypeScriptからJavaScriptへのトランスパイルは https://www.typescriptlang.org/play (TypeScript 3.9.2 / targetはESNext) で行いました。 Tree-shaking の挙動については https://rollupjs.org/repl/ にトランスパイルしたJavaScriptコードを貼り付けて検証しました
ViteのCSS Modulesは、JSのようにTree shakingできない - console.lealog();
なんとなしにビルド後のCSSファイルを眺めてて、なんで使ってないUIパーツのCSS定義が含まれてるの・・？って思ったのがきっかけ。 こういうこと たとえば、こういうディレクトリ構成でコンポーネントを書いてたとする。 - components - action-buttons - index.jsx - styles.module.css - page.jsxコンポーネントの実装はこのように。 // index.jsx import styles from "./styles.module.css"; export const ButtonA = () => <button class={styles.buttonA}>A</button> export const ButtonB = () => <button class={styles.buttonB}>B</button> expor
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Tree Shaking に対応してないライブラリを使っている場合は re-export はやめたほうがいいかも
Babel 7.10 Ships with Better React Tree-Shaking
How to Fully Optimize Webpack 4 Tree Shaking
Deep Dive Into Tree-Shaking
Lessons on tree-shaking Lodash with Webpack and Babel
dengekionline.com
online.nikkei-cnbc.co.jp
zenn.dev/kakakakakku
togetter.com
qiita.com/Ryo-0131
x.com