Vue打包优化：打包去掉node_modules最佳方案

在Vue项目中，通过webpack的externals配置可以将node_modules中的依赖项在打包时排除，这样可以显著减少最终生成的bundle大小。以下是一个配置示例：

// vue.config.js
module.exports = {
  configureWebpack: {
    externals: {
      'vue': 'Vue',
      'vue-router': 'VueRouter',
      // 添加更多的依赖...
    }
  }
}

在这个配置中，externals对象的键是包名，值是全局变量名。这意味着当webpack处理依赖时，它会忽略这些包，并期望这些依赖在运行时的环境中已经作为全局变量提供。

请注意，使用externals时，你需要确保这些全局变量在运行时是可用的。通常，你可以通过CDN或者其他方式在HTML文件中引入这些库。

例如，在HTML文件中添加如下CDN链接：

<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue-router@3.5.1/dist/vue-router.min.js"></script>

这样，webpack在打包时就不会将这些库包含在最终的bundle中，从而减少了包的大小。