Как динамически импортировать с помощью веб-пакета

Question

Я хочу использовать значки FontAwesome, но весь пакет слишком велик, и мне нужно выбрать только те, которые я использую

Я использую vue & webpack

Rightтеперь у меня есть стандарт:

import { library } from '@fortawesome/fontawesome-svg-core'

import { faGem as falFaGem, faDatabase as falFaDatabase } from '@fortawesome/pro-light-svg-icons'
import { faGem as farFaGem } from '@fortawesome/pro-regular-svg-icons'
import { faGem as fasFaGem } from '@fortawesome/pro-solid-svg-icons'

library.add(falFaGem, falFaDatabase, farFaGem, fasFaGem)

Дело в том, что у меня есть около 80 (на данный момент) иконок, и некоторые из них дублируются, как faGem в примере, отсюда и «faGem as farFaGem»

Я попытался импортировать FAS из '@ fortawesome / pro-регулярно-svg-icons' и создать foreach и добавить в библиотеку только нужные мне иконки, но веб-пакет импортирует весь пакет в скомпилированный код

Есть либолее простой и понятный способ добиться этого?

Answer 1

Я считаю, что название вашего вопроса немного неверно.Чего вы хотите добиться, так это уменьшить размер пакета FontAwesomes npm, и это можно сделать разными способами.

В настоящее время наиболее распространенным способом является использование Treeshaking .По сути, ваш код будет «проанализирован» и будет сгенерирован график зависимостей, прежде чем предоставить вам «скомпилированную» версию кода, он удалит все те модули, которые не использовались из FontAwesome.

FontAwesome может выполнять TreeShaking, если ваш инструмент (веб-пакет) позволяет это, к сожалению, кажется, есть некоторые проблемы с Webpack 4 , но они предлагают некоторые обходные пути, такие как установка переменных переменных false в вашей конфигурации:

   const path = require('path');

module.exports = {
  entry: './src/index.js',
  output: {
    filename: './bundle.js'
  },
  module: {
    rules: [{
        test: /\.js$/,
        include: path.resolve(__dirname, 'src'),
        use: {
          loader: 'babel-loader',
          options: {
            presets: [
              ['@babel/preset-env', { modules: false }],
            ],
            plugins: ['@babel/plugin-proposal-class-properties'],
          }
        }
      },
    ]
  }
};

С другой стороны, я считаю, что то, что вы хотите достичь, довольно сложно (вам все равно нужно будет объявить все значки, которые вы хотите использовать из FontAwesome (чтобы использовать вызов require (...))динамически это то, что алгоритм встряхивания дерева не может обойти, и он импортирует весь пакет npm), и то же самое для конфликтов имен.

Если вы хотите, чтобы это было немного чище, возможно, объявите и добавьтевсе эти значки в отдельном файле вашего проекта, но, насколько я могу судить, лучшего способадобейся того, чего хочешь.