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会将整个包导入到已编译的代码中

有没有更简单，更清洁的方法来实现这一目标？

Answer 1

我相信您问题的标题有误。您想要实现的是减小FontAwesomes npm软件包的大小，并且可以通过不同的方式来实现。

当今最常见的方式是使用Treeshaking。基本上，将对代码进行“分析”并生成依赖关系图，然后再为您提供代码的“编译”版本，它将删除FontAwesome中所有未使用的模块。

如果您的工具（webpack）允许，FontAwesome可以执行TreeShaking，可悲的是似乎有some problems with 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包），并且对于名称冲突也是如此。

如果您希望它更干净一点，也许可以在项目的单独文件中声明并添加所有这些图标，但是据我所知，没有更好的方法来实现您想要的。

如何使用Webpack动态导入

1 个答案: