Переместить fontawesome в собственный пакет, используя динамический импорт c

Question

Я пытаюсь уменьшить размер своего пакета, разделив его на несколько частей. BundleAnalyzerPlugin сообщает мне, что Fontawesome импортируется полностью, хотя я пытался импортировать только нужные мне иконки, что выглядит странно.

Мой импорт fontawesome

import { library } from '@fortawesome/fontawesome-svg-core';
import { faBell, faEyeSlash, faEye} from '@fortawesome/free-solid-svg-icons';
import { faBell as regularBell} from '@fortawesome/free-regular-svg-icons';

...
library.add( faBell, faEye, faEyeSlash, regularBell, regularCalendarAlt)

Моя замечательная версия

"@fortawesome/fontawesome": "^1.1.5",
"@fortawesome/fontawesome-free-regular": "^5.0.10",
"@fortawesome/fontawesome-free-solid": "^5.0.10",
"@fortawesome/fontawesome-svg-core": "^1.2.8",
"@fortawesome/react-fontawesome": "^0.1.3",

Я пытаюсь использовать метод разделения import () , описанный здесь , но не могу понять, как заставить его работать для Fontawesome.

return import(/* webpackChunkName: "lodash" */ 'lodash').then(({ default: _ }) => {
  ...
}

Как я могу поместить split fontawesome в свой собственный пакет и загрузить его синхронно?

Что-то вроде Предварительная выборка / Предварительная загрузка тоже будет работать, но те методы, кажется, имеют очень плохую поддержку браузера? Мне, к сожалению, нужна поддержка Safari.

Мой конфиг веб-пакета

  // Set up webpack plugins
  config.plugins = [
    nodeEnvPlugin,
    firebasePlugin,
    cssExtractPlugin,
    new BundleAnalyzerPlugin(
      {
        excludeAssets: /node_modules/,
        statsOptions: {
          exclude: /node_modules/
        }
      }
    )
  ]

С уважением / K

Answer 1

Вы пытаетесь просмотреть node_modules, который не должен быть частью вашего пакета при развертывании. Вы должны настроить свой BundleAnalyzerPlugin для просмотра назначения выходных данных веб-пакета. Таким образом, вы можете полностью определить, какие потребляют большие с точки зрения размера.

Вот вариант об этом из вашей библиотеки по выбору:

https://github.com/webpack-contrib/webpack-bundle-analyzer#bundledir

Вот мой пример реализации той же техники, что и у вас выше, для потрясающей оптимизации

Вот мой репозиторий для справки: https://github.com/crrmacarse/crrmacarse.github.io