有没有办法用 Webpack 清除 FontAwesome?
Is there a way to purge FontAwesome with Webpack?
我的项目目前正在使用 Rails 6.1
、@fortawesome/fontawesome-free 5.15.3
和 Heroku。我的配置很简单:
// 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"
我将 FontAwesome 图标用作 CSS 类,我在 .html.erb
文件中调用它:
<i class="fas fa-users"></i>
我使用框架中的图标很少(< 20),但 Webpack 似乎编译了整个框架。一切正常,我很惊讶 FA 框架仍然以 所有 可能的格式编译(css(我唯一需要的),svg,webfonts)。
这是我的 Heroku 构建日志:
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)
我是否应该像 Webpack 警告我那样担心这些文件的大小?有什么方法可以清除 FontAwesome(就像我使用 Tailwind 所做的那样)以便只编译使用过的图标吗?我是否遗漏了有关 Webpack 工作原理的信息?
您可以只导入您想要使用的图标
import { library } from "@fortawesome/fontawesome-svg-core";
import {
faFacebookSquare,
faGooglePlusSquare
} from "@fortawesome/free-brands-svg-icons";
library.add(faFacebookSquare, faGooglePlusSquare);
请注意,如果这些图标没有显示,那么您可能需要 dom 帮助程序
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();
我的项目目前正在使用 Rails 6.1
、@fortawesome/fontawesome-free 5.15.3
和 Heroku。我的配置很简单:
// 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"
我将 FontAwesome 图标用作 CSS 类,我在 .html.erb
文件中调用它:
<i class="fas fa-users"></i>
我使用框架中的图标很少(< 20),但 Webpack 似乎编译了整个框架。一切正常,我很惊讶 FA 框架仍然以 所有 可能的格式编译(css(我唯一需要的),svg,webfonts)。
这是我的 Heroku 构建日志:
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)
我是否应该像 Webpack 警告我那样担心这些文件的大小?有什么方法可以清除 FontAwesome(就像我使用 Tailwind 所做的那样)以便只编译使用过的图标吗?我是否遗漏了有关 Webpack 工作原理的信息?
您可以只导入您想要使用的图标
import { library } from "@fortawesome/fontawesome-svg-core";
import {
faFacebookSquare,
faGooglePlusSquare
} from "@fortawesome/free-brands-svg-icons";
library.add(faFacebookSquare, faGooglePlusSquare);
请注意,如果这些图标没有显示,那么您可能需要 dom 帮助程序
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();