Как кодировать сплит-пакеты (fontawesome) из проекта Webpack 4 React

Question

У меня есть большой пакет, который нужно разбить на несколько кусков, чтобы получить ограничение 2 МБ PWA. Из BundleAnalyzerPlugin я вижу, что мне было бы полезно разделить loda sh, fontawsome и момент на отдельные куски / файлы комплектов.

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

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

import { faBell, faEyeSlash, faEye} from '@fortawesome/free-solid-svg-icons';
import { faBell as regularBell} from '@fortawesome/free-regular-svg-icons';
import('@fortawesome/fontawesome-svg-core').then(fontawesome => {
  fontawesome.library.add(
    faBell, faEye, faEyeSlash, regularBell
  )
})

Какая правильная техника для разделения пакетов, таких как loda sh, fontawesome и момента на отдельные пакеты?

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

Answer 1

Я не знаю, что именно вы пытаетесь придумать, но я предполагаю, что вы хотите меньший размер пачки, тогда я провел исследование для вас:

Если вы действительно хотите попробовать sh размер вашего пакета к наименьшему, тогда ищите сжатие gzip

https://webpack.js.org/plugins/compression-webpack-plugin/

Небольшое исследование приведет вас к этому: https://webpack.js.org/guides/code-splitting/

Какая правильная методика для разделения пакетов, таких как loda sh, fontawesome и момента на отдельные связки?

Для loda sh:

// You should be using:
import isEmpty from 'lodash/isEmpty'

// instead of:
import _ from 'lodash';
import { isEmpty } from 'lodash';

читать: https://www.blazemeter.com/blog/the-correct-way-to-import-lodash-libraries-a-benchmark/

Для момента: https://medium.com/@Memija / меньше-больше-с-момент-и-момент-часовой пояс- d7afbab34df3

Для fontawesome: я точно не знаю, так ли это?

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

Да, он будет включен в комплект, конечно, в зависимости от того, что вы указали в своей конфигурации? То, что вы сделали, это из самой документации: https://fontawesome.com/how-to-use/with-the-api/other/tree-shaking