vue中的vendor.js文件过大问题及解决

问题描述：

在使用 Vue 应用构建时，有时会遇到 vendor.js 文件过大的问题，导致应用加载速度缓慢，用户体验受到影响，那么如何解决这个问题呢？

问题分析：

Vue 应用在打包的时候，会抽取第三方库和模块到一个名为 vendor.js 的文件中，这个文件包含了所有在项目中被使用的第三方库和模块，如果这些库和模块很多，那么 vendor.js 文件会变得非常大，从而导致加载速度缓慢的问题。因此，我们需要找到一种解决方法，来减小 vendor.js 文件的大小，提升应用的加载速度。

解决方法：

1. 使用 CDN 引入第三方库

可以将一些较大的第三方库放在CDN上，然后在项目中引用它们。这样可以减小 vendor.js 文件的大小，并且还能利用 CDN 的缓存机制，提高页面加载速度。

例如，我们可以在 index.html 中引入 jQuery：

<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>

然后在组件中正常使用：

import $ from 'jquery'

// ...

2. 使用 webpack 的 externals 配置

externals 是 Webpack 的一个配置项，它可以将一些库实现外部引用，即不在 vendor.js 中打包进去，从而减小打包后的文件体积。

例如，我们可以在 webpack.config.js 中配置 externals，将 jQuery 配置成外部引用：

module.exports = {
  // ...
  externals: {
    jquery: 'jQuery'
  }
}

然后在组件中使用 jquery：

import $ from 'jquery'

// ...

当 Webpack 解析到 import $ from 'jquery' 时，会自动忽略对 jquery 的打包，而是从全局变量中引用，从而减小 vendor.js 文件体积。

总结：

针对 vendor.js 文件过大的问题，我们可以使用 CDN 引入第三方库，或者使用 Webpack 的 externals 配置，让一些库实现外部引用，从而减小打包后的文件体积。这样可以提高应用的加载速度，提升用户体验。