18 æ¥ç®ã®èšäºã§ãã
ããããã³ãŒããæžããŠæžãè¶³ããŠæ¶ããŠæžãçŽããŠæ¶ããŠæžãæããŠã£ãŠç¹°ãè¿ããŠããšããããããŸã ã©ããã§äœ¿ã£ãŠãã£ãïŒãã¿ããã«ãªãããšããããŸããè¿å¹Žã¯ VS Code ãç°è²ã§è¡šç€ºããŠãããã ESLint ã§æ€åº ã§ããããã§ãããã©ãã§ãå¥ãã¡ã€ã«ããã䜿ãããããªãã€ã ãšããããã®ãå³ããæãã§ãã
ããš CSS ã®äœ¿ãããŠããªãã¹ã¿ã€ã«ãã
DevTools ã«ã¯ãããããã®ãæ€åºããæ©èœããããŸãã
å ã«ãŸãšã
- Coverage ããã«ã䜿ã£ãŠæªäœ¿çšç®æãå²åãèšæž¬
- ãŸãšãã«ãããªãããŒã«ã
æªäœ¿çšã³ãŒããæ€åº
- DevTools ã®å³äž “⊔ â More tools â Coverage
- æç€ºã«åŸã reload ãã¿ã³ãæŒã
- ç»é¢ã¯åèªã¿èŸŒã¿ããã
- å¿ èŠã«å¿ããŠãã¿ã³ãæŒããªã©ã®æäœ
CSS
ã»ã¬ã¯ã¿ãŒãå©çšãããŠãããã§èŠãŠããããã§ãããããã£ãªã©ããªããŠãã°ãªãŒã³ã«ãªããŸããã
JS
è²ã¯è¡åäœã§ä»ããã©æ€åºã¯é¢æ°åäœãããã§èŠãŠããã®ããªïŒãif (false)
ã¿ãããªçµ¶å¯Ÿã«éããªãæ¡ä»¶åå²ã§ãã°ãªãŒã³ã«ãªããŸããã
å®è¡æãæ€åºããŠããã
èšæž¬éå§ãããšèªåçã«ç»é¢ãåèªã¿èŸŒã¿ããŸãããããã®åŸãèšæž¬ãšããã芳枬ã¯ç¶è¡ãããŠããŸããäŸãã°ãã¿ã³ãæŒãããåãç³»ã®åŠçã¯æåã¯ã¬ããã ãã©ããã®åŠçãéããšã°ãªãŒã³ã«å€åããŸãã
ã¡ãªã¿ã« 1 è¡ã«ãŸãšãããšéã£ãŠãªãåŠçã§ãã°ãªãŒã³ã®ããŒã¯ãä»ããã©ãã¡ãããšèšæž¬ã¯ãããŠãŠ Coverage ããã«ã® Unused bytes æ°åã®æ°åã«ã¯åæ ãããŠãŸããã
ãã®ä»
source maps ã¯äœ¿ããªã
ã®ã§ãã©ã§ãããã¡ã€ã«ã Sources ããã«ã«åºãŠããããšã«ãªããŸããã€ãããããšå®éã®ãœãŒã¹ã³ãŒãã®ãã¡ã€ã«ãšãããŠãã®ã§è©²åœç®æãæ¢ããšããæéãå¢ããŸãããŸã仿¹ãªãããã
Lighthouse
Lighthouse ã䜿ã£ãããã©ãŒãã³ã¹èšæž¬ã«ã Unused bytes ã®æ°åãåæ ãããŸãã
Unused bytes ã®æ°åèªäœãç¹æ°ã«çŽæ¥é¢ä¿ããããã§ã¯ãªãããã ãã©ïŒèŠã¯é床ãåºãã°è¯ãã®ã§ïŒãé床ãåºããã¡ã€ã«è»¢éãµã€ãºãæžãããããšã㯠Coverage ãåèã«ã³ãŒããåé€ãããšããäŸåãæžãããšããããšè¯ããšæããŸãã
ã¡ãªã¿ã«å€éšã©ã€ãã©ãªãŒããããã®ã¯ãå§ãããŸãããä¿å®ã«äžéœåãªã®ã§ã
CSS ãèªåã§åã
DevTools ã«èªåã§åããããªæ©èœã¯ãªãã®ã§ããŒã«ã䜿ã£ãŠãã ãããCSS 㯠PurgeCSS ãšããã®ããã¶ãä»äžçªæåïŒãªã®ããªïŒ
æè¿ã¶ãã¶ãèšãããŠã Tailwind CSS ã¯ãã®ä»çµã¿ã« PurgeCSS ãçµã¿èŸŒãã§ããããã«ããããšå©çšããŠãããã®ã ãã«çµã£ããã®ãåºãŠããããã§ããã¹ããïœãïŒã¡ãªã¿ã«åã«ã¯èããŠãŸãããããã¯ãŸã 䜿ã£ãããšã¯ãªãã§ããïŒ
purge
ãšããèšå®ã§ãããããã
// tailwind.config.js module.exports = { purge: [ './src/**/*.html', './src/**/*.vue', './src/**/*.jsx', ], theme: {}, variants: {}, plugins: [], }
JS ãèªåã§åã
JS ã®ã³ãŒããåãã£ãŠã®ãããã®ããªãããã°æããŠãã ãããwebpack ã«ã¯ tree shaking ãšããååã§ãããããæ©èœãçµã¿èŸŒãŸããŠãããšèããããšããããŸãã
ç»é¢ãã䜿ãããŠãããã¯ãŸãå¥ã§ããã©ãã
PurgeCSS 㯠npm ã§ã¢ãã¬ã
å šç¶é¢ä¿ãªããã ãã©ãPurgeCSS ã®ãªããžããªãŒã¡ããšèŠãã npm v7 ã§å°å ¥ãããæ°æ©èœãworkspaces ã䜿ã£ãŠã¢ãã¬ãããŠããã»ããŒã
ãããŸã
å®éã¬ããã«ãªã£ãŠããŠããæ¬åœã«äœ¿ãããŠããªãããšãã蚌æããã®ã£ãŠã¡ãã£ãšé£ããã®ã§èããã®ã§ããæé ã®å€ãæäœã®åŸãšããå¥ããŒãžã ãšãã颿°åã§ã³ãŒãããŒã¹æ€çŽ¢ãšãã§ã©ãã«ãããæãããªã
ãšããã§ Coverage ã®èšäºãåŸåãã«ããŠããã¡ããã© CodeGrid ã§ PurgeCSS ã®åãæ¥ãã®ã§ãã®å¢ãã«ä¹ããŸãããããããšãããããŸããïŒïŒïŒ
åè
- PurgeCSS – Remove unused CSS
- Optimizing for Production – Tailwind CSS
- Tree Shaking | webpack
- CSSã軜ãä¿ã€ãPurgeCSS | åç·š PurgeCSSã®åºæ¬æ©èœ | CodeGrid
- Tailwind CSSã§å§ãããŠãŒãã£ãªãã£ãã¡ãŒã¹ãCSS | 第2å éçºç°å¢ã®æ§ç¯ãšPurgeCSSã«ã€ã㊠| CodeGrid
- FullHuman/purgecss: Remove unused CSS
- rfcs/0026-workspaces.md at latest · npm/rfcs