ruby-on-rails - 有没有办法用 Webpack 清除 FontAwesome？

Question

我的项目目前正在使用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 工作原理的一些信息？

标签： ruby-on-railsherokuwebpackfont-awesome

Answer 1

你可以只导入你想使用的图标

import { library } from "@fortawesome/fontawesome-svg-core";
import {
  faFacebookSquare,
  faGooglePlusSquare
} from "@fortawesome/free-brands-svg-icons";

library.add(faFacebookSquare, faGooglePlusSquare);

请注意，如果这些图标没有显示，那么您可能需要 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();