在前端开发中，我们通常会使用 webpack 来管理项目并进行模块化开发。在项目中，我们可能会使用许多第三方库来提高效率，但是这些库又会增加项目的体积。为了避免这个问题，我们可以使用 webpack-external-import 这个 npm 包来实现按需加载第三方模块。
1. webpack-external-import 的原理
webpack-external-import 的原理是将第三方模块从打包后的代码中移除，改为在运行时从外部引入，以实现动态加载模块。这个过程需要手动配置 webpack 的 externals 配置项来指定哪些模块需要动态加载，然后在代码中使用 import() 方法来实现动态导入。
2. 安装和使用
首先需要安装 webpack-external-import 这个包：
npm install webpack-external-import --save-dev
然后在 webpack 的配置文件中增加 externals 配置项，并使用 ExternalImportPlugin 插件来生成对应的 JSON 文件。
-- -------------------- ---- -------
-- -----------------
----- -------------------- - -----------------------------------
-------------- - -
-- -------
---------- -
-- --------------
------- ---------
------- ----
--
-------- -
-- -- ---- ---- --------- ---
--- -----------------------
--
--接下来就可以在代码中使用动态导入了，示例代码如下：
import(external('jquery')).then($ => {
console.log('jQuery 版本为：', $.fn.jquery)
}).catch(error => {
console.error('动态加载出错了！', error);
});在上述代码中，'jquery' 是配置 externals 时指定的模块名，external 函数是 webpack-external-import 提供的一个方法，用于生成动态导入模块的路径。
3. 注意事项
使用 webpack-external-import 需要注意以下几点：
- externals 配置项只能指定一次，如果使用多次会覆盖之前的。
- 必须使用生成的 JSON 文件来获取动态导入模块的路径。
- 如果动态导入失败，会抛出错误并通知用户。
- 不推荐将常用的模块（如 React、Vue）进行动态导入，因为会增加请求次数。
4. 总结
使用 webpack-external-import 可以帮助我们将项目中的第三方库按需加载，从而减小项目的体积，提高页面加载速度。在配置和使用时需要注意上述几点，同时尽量避免动态导入常用的模块，以达到更好的效果。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5eedc227b5cbfe1ea061203b