如何使用webpack进行动态导入

Question

我想使用FontAwesome的图标，但整个包太大了，我只能选择我需要的图标

我正在使用vue和webpack

目前我只有标准包：

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”的情况。

我尝试从“@fortawesome/pro-regular-svg-icons”中导入FAS，并使用foreach添加到库中，但是webpack将整个包导入到编译代码中。

有更简单、更清晰的方法来实现这一点吗？

- John

Answer 1

我认为你的问题标题有点不正确。你想要实现的是减小FontAwesomes npm包的大小，这可以通过不同的方式来实现。

如今最常见的方法是使用TreeShaking。基本上，你的代码将被'''分析'''，生成依赖关系图，在给你编译后的代码之前，它将从FontAwesome中删除所有未使用的模块。

如果你的工具（webpack）允许，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包），名称冲突也是如此。

如果你希望代码更加简洁清晰，可以在你项目的一个单独文件中声明和添加所有这些图标，但据我所知，没有更好的方法来实现你想要的功能。

- SirPeople