webpack优化，预加载与配置externals外部依赖_webpack使用externals后,还需要使用import语法吗-CSDN博客

本文链接：https://blog.csdn.net/EATERZ/article/details/138307707

如果你只想配置 webpackPrefetch，而不涉及其他动态导入相关的配置，你可以在 Vue 项目的 vue.config.js 文件中进行如下配置：

module.exports = {
  chainWebpack: config => {
    // 移除 prefetch（取消预加载）
    config.plugins.delete('prefetch')
    // 匹配首次不加载的文件，空闲时间加载
    config.plugin('prefetch').tap(options => {
      options[0].fileBlacklist = options[0].fileBlacklist || []
      options[0].fileBlacklist.push(/your-blacklist-regex/)
      // 例如：options[0].fileBlacklist = [/\.map$/, /\.css$/]
      return options
    })
  }
}

externals 字段用于告诉 webpack 哪些模块是外部依赖，不需要被打包进最终的输出文件中。这样做的好处是，可以在项目中直接使用全局变量或者通过外部引入的方式来使用这些模块，而不需要将它们打包进项目的 bundle 文件中，从而减小 bundle 的体积。

具体配置方法是，首先确保在 HTML 文件中引入了 AMap 相关的资源，比如 JavaScript 文件。然后，你可以在项目中直接使用 AMap 对象，而无需通过 import 语句引入。例如：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue App</title>
    <script src="https://webapi.amap.com/maps?v=1.4.15&key=your-amap-key"></script>
</head>
<body>
    <div id="app"></div>
    <script src="app.js"></script>
</body>
</html>

在上面的 HTML 中，我们通过 <script> 标签引入了 AMap 的 JavaScript 文件。然后，在项目中，你可以直接使用 AMap 对象，而不需要进行额外的 import：

// 在任意 Vue 组件或 JavaScript 文件中直接使用 AMap 对象
AMap.plugin('AMap.Geolocation', function () {
  // 插件加载完毕回调函数
})

这样配置后，webpack 在打包时会忽略对 AMap 的打包处理，而直接将 AMap 对象视为外部依赖。

module.exports = {
  configureWebpack: {
    externals: {
      AMap: 'AMap'
    }
  }
}