不要在 webpack 构建中包含 JS 库（假设它会包含在脚本标签中）答案

【问题标题】：Don't include a JS library in webpack build (with the assumption that it'll be included in a script tag)不要在 webpack 构建中包含 JS 库（假设它会包含在脚本标签中）
【发布时间】：2021-01-27 05:37:19
【问题描述】：

我正在使用一个大型库（大约 1 MB）和 webpack 进行构建。该库只是正常使用 - 它在 package.json 的 dependencies 中，在我的代码中的某个时刻我使用 import from <lib_name> 导入它（这是在 Typescript 中）。

所以现在，当我运行 webpack build 时，最终结果 bundle.js 包含库的所有（或大部分？不确定实际上有多少 webpack 修剪）代码。所以即使是我的准系统应用程序，只有几行代码和一个导入，也有 1MB 的构建大小。

我想做的是不将库放入最终构建中，而是基本上在我的 HTML 文件中包含如下内容：

<script src="https://some.cdn.here/thelibrary-v0.0.0.min.js"></script>
<script src="bundle.js"></script>

换句话说，构建中的文件将类似于：

BEFORE:
  dist/
    bundle.js -- 1005 KB

AFTER:
  dist/
    thelibrary-v0.0.0.min.js -- 1000 KB
    bundle.js -- 5 KB

bundle.js 变成了一个只有我的代码的非常小的文件，它只是希望预先加载库。需要明确的是 - bundle.js 仍将使用库中的内容并需要它运行。我不确定这是否真的可能，因为我对 webpack 如何实际处理导入和东西（尤其是与 uglify/minification 结合使用）没有很好的理解。有没有可能做这样的事情，如果可以，怎么做？

【问题讨论】：

标签： javascript typescript webpack

【解决方案1】：

可以通过externals完成。

module.exports = {
  //...
  externals: {
    jquery: 'jQuery'// thelibrary in your case
  }
};

【讨论】：