如何使用 webpack 动态导入答案

【问题标题】：How to import dynamically with webpack如何使用 webpack 动态导入
【发布时间】：2019-01-29 10:28:09
【问题描述】：

我想用 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 将整个包导入到编译后的代码中

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

【问题讨论】：

标签： javascript webpack ecmascript-6

【解决方案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 包），名称冲突也是如此。

如果你想让它更简洁一些，可以在项目的单独文件中声明并添加所有这些图标，但据我所知，没有更好的方法来实现你想要的。

【讨论】：