Is there a way to purge FontAwesome with Webpack? - ruby-on-rails

Question

my project is currently using Rails 6.1, #fortawesome/fontawesome-free 5.15.3 & Heroku. My config is straightforward:
// package.json
{
"name": "web",
"dependencies": {
"#fortawesome/fontawesome-free": "^5.15.3",
...
},
...
}
// app/javascript/packs/application.js
...
Rails.start()
...
import "stylesheets/application"
import "#fortawesome/fontawesome-free/css/all"
I use FontAwesome icons as CSS classes, which I call within my .html.erb files:
<i class="fas fa-users"></i>
I use very few icons from the framework (< 20), yet Webpack seems to compile the whole framework. Everything works fine, I am just surprised how the FA framework is still compiled in all possible formats (css (the only one I need), svg, webfonts).
Here are my Heroku build logs:
Version: webpack 4.46.0
Time: 19571ms
Built at: 07/21/2021 9:10:54 PM
Asset Size Chunks Chunk Names
css/application-e87f29dc.css 72.8 KiB 0 [emitted] [immutable] application
css/application-e87f29dc.css.br 13.7 KiB [emitted]
css/application-e87f29dc.css.gz 16.4 KiB [emitted]
js/application-5ac2d3a4589f0bac8765.js 128 KiB 0 [emitted] [immutable] application
js/application-5ac2d3a4589f0bac8765.js.br 25.4 KiB [emitted]
js/application-5ac2d3a4589f0bac8765.js.gz 29.3 KiB [emitted]
js/application-5ac2d3a4589f0bac8765.js.map 370 KiB 0 [emitted] [dev] application
js/application-5ac2d3a4589f0bac8765.js.map.br 75.2 KiB [emitted]
js/application-5ac2d3a4589f0bac8765.js.map.gz 86.9 KiB [emitted]
manifest.json 1.82 KiB [emitted]
manifest.json.br 348 bytes [emitted]
manifest.json.gz 403 bytes [emitted]
media/webfonts/fa-brands-400-216edb96.svg 730 KiB [emitted] [big]
media/webfonts/fa-brands-400-216edb96.svg.br 218 KiB [emitted]
media/webfonts/fa-brands-400-216edb96.svg.gz 249 KiB [emitted] [big]
media/webfonts/fa-brands-400-329a95a9.woff 87.9 KiB [emitted]
media/webfonts/fa-brands-400-89a52ae1.eot 131 KiB [emitted]
media/webfonts/fa-brands-400-89a52ae1.eot.br 81.9 KiB [emitted]
media/webfonts/fa-brands-400-89a52ae1.eot.gz 88.6 KiB [emitted]
media/webfonts/fa-brands-400-9e138496.ttf 131 KiB [emitted]
media/webfonts/fa-brands-400-9e138496.ttf.br 81.9 KiB [emitted]
media/webfonts/fa-brands-400-9e138496.ttf.gz 88.5 KiB [emitted]
media/webfonts/fa-brands-400-c1210e5e.woff2 75 KiB [emitted]
media/webfonts/fa-regular-400-1017bce8.ttf 32.9 KiB [emitted]
media/webfonts/fa-regular-400-1017bce8.ttf.br 15 KiB [emitted]
media/webfonts/fa-regular-400-1017bce8.ttf.gz 15.9 KiB [emitted]
media/webfonts/fa-regular-400-19e27d34.svg 141 KiB [emitted]
media/webfonts/fa-regular-400-19e27d34.svg.br 30.3 KiB [emitted]
media/webfonts/fa-regular-400-19e27d34.svg.gz 36.3 KiB [emitted]
media/webfonts/fa-regular-400-36722648.woff 15.9 KiB [emitted]
media/webfonts/fa-regular-400-4079ae2d.eot 33.2 KiB [emitted]
media/webfonts/fa-regular-400-4079ae2d.eot.br 15.1 KiB [emitted]
media/webfonts/fa-regular-400-4079ae2d.eot.gz 15.9 KiB [emitted]
media/webfonts/fa-regular-400-68c5af1f.woff2 13 KiB [emitted]
media/webfonts/fa-solid-900-07c3313b.ttf 198 KiB [emitted]
media/webfonts/fa-solid-900-07c3313b.ttf.br 90.3 KiB [emitted]
media/webfonts/fa-solid-900-07c3313b.ttf.gz 100 KiB [emitted]
media/webfonts/fa-solid-900-13de59f1.svg 897 KiB [emitted] [big]
media/webfonts/fa-solid-900-13de59f1.svg.br 199 KiB [emitted]
media/webfonts/fa-solid-900-13de59f1.svg.gz 250 KiB [emitted] [big]
media/webfonts/fa-solid-900-ada6e6df.woff2 76.4 KiB [emitted]
media/webfonts/fa-solid-900-c6ec0800.woff 99.3 KiB [emitted]
media/webfonts/fa-solid-900-efbd5d20.eot 198 KiB [emitted]
media/webfonts/fa-solid-900-efbd5d20.eot.br 90.4 KiB [emitted]
media/webfonts/fa-solid-900-efbd5d20.eot.gz 100 KiB [emitted]
Entrypoint application = css/application-e87f29dc.css js/application-5ac2d3a4589f0bac8765.js js/application-5ac2d3a4589f0bac8765.js.map
[0] ./node_modules/stimulus/index.js + 38 modules 77.4 KiB {0} [built]
| 39 modules
[2] (webpack)/buildin/module.js 552 bytes {0} [built]
[5] ./app/javascript/stylesheets/application.scss 39 bytes {0} [built]
[7] ./app/javascript/controllers sync _controller\.js$ 243 bytes {0} [built]
[8] ./app/javascript/controllers/forecasts_controller.js 3.28 KiB {0} [optional] [built]
[9] ./app/javascript/controllers/hello_controller.js 2.67 KiB {0} [optional] [built]
[10] ./app/javascript/controllers/search_controller.js 4.37 KiB {0} [optional] [built]
[11] ./app/javascript/packs/application.js + 4 modules 16.7 KiB {0} [built]
| ./app/javascript/packs/application.js 585 bytes [built]
| ./app/javascript/controllers/index.js 742 bytes [built]
| + 3 hidden modules
+ 6 hidden modules
WARNING in asset size limit: The following asset(s) exceed the recommended size limit (244 KiB).
This can impact web performance.
Assets:
media/webfonts/fa-solid-900-13de59f1.svg (897 KiB)
media/webfonts/fa-brands-400-216edb96.svg (730 KiB)
media/webfonts/fa-solid-900-13de59f1.svg.gz (250 KiB)
media/webfonts/fa-brands-400-216edb96.svg.gz (249 KiB)
WARNING in webpack performance recommendations:
You can limit the size of your bundles by using import() or require.ensure to lazy load some parts of your application.
For more info visit https://webpack.js.org/guides/code-splitting/
Child mini-css-extract-plugin node_modules/css-loader/dist/cjs.js??ref--5-1!node_modules/postcss-loader/src/index.js??ref--5-2!node_modules/#fortawesome/fontawesome-free/css/all.css:
Entrypoint mini-css-extract-plugin = *
18 modules
Child mini-css-extract-plugin node_modules/css-loader/dist/cjs.js??ref--6-1!node_modules/postcss-loader/src/index.js??ref--6-2!node_modules/sass-loader/dist/cjs.js??ref--6-3!app/javascript/stylesheets/application.scss:
Entrypoint mini-css-extract-plugin = *
[0] ./node_modules/css-loader/dist/cjs.js??ref--6-1!./node_modules/postcss-loader/src??ref--6-2!./node_modules/sass-loader/dist/cjs.js??ref--6-3!./app/javascript/stylesheets/application.scss 43.7 KiB {0} [built]
+ 1 hidden module
Asset precompilation completed (58.34s)
Should I worry about the size of these files like Webpack warns me? Is there any way to purge FontAwesome (like I do with Tailwind) so that only the used icons are compiled? Am I missing something about how Webpack works?

Answer 1

you could import only icons you wanna use
import { library } from "#fortawesome/fontawesome-svg-core";
import {
faFacebookSquare,
faGooglePlusSquare
} from "#fortawesome/free-brands-svg-icons";
library.add(faFacebookSquare, faGooglePlusSquare);
Note that if those icons do not show, then you maybe need dom helper
import { library, dom } from "#fortawesome/fontawesome-svg-core";
import {
faFacebookSquare,
faGooglePlusSquare
} from "#fortawesome/free-brands-svg-icons";
library.add(faFacebookSquare, faGooglePlusSquare);
// Kicks off the process of finding <i> tags and replacing with <svg>
dom.watch();