基于vue-cli npm run build之后vendor.js文件过大的解决方法

一、背景介绍

在使用vue-cli进行项目开发时，当使用npm run build命令对代码进行打包时，会生成一个vendor.js文件，这个文件包含了所有第三方库的代码，而且这个文件可能会非常大，甚至占据整个打包后文件的很大一部分，这会导致页面加载速度缓慢，影响用户体验。本文将介绍几种解决这个问题的方法。

二、解决方法

1. 按需引入第三方库

在进行项目开发时，可能只会使用第三方库的部分功能，这时可以考虑按需引入第三方库。具体做法是，在代码中使用import语句引入需要使用的库的特定模块，而不是引入整个库。这样可以减少打包后的vendor.js文件的大小。

比如，只使用了lodash工具库中的_.debounce方法：

import debounce from 'lodash/debounce'

export default {
  methods: {
    search: debounce(function() {
      // 进行搜索
    }, 500)
  }
}

这样，打包后的vendor.js文件就只包含lodash库的一部分代码，而不是整个库的代码，对于减小文件大小非常有帮助。

1. 使用externals选项排除第三方库

在vue-cli的webpack配置中，可以使用externals选项来排除一些第三方库不被打包进vendor.js文件中。具体做法是，在vue.config.js文件中添加一个配置项：

module.exports = {
  configureWebpack: {
    externals: {
      vue: 'Vue',
      'vue-router': 'VueRouter',
      'element-ui': 'ElementUI'
    }
  }
}

以上述的配置为例，意思是排除vue、vue-router和element-ui这三个库不被打包进vendor.js文件中，而是在页面中引入这些库的cdn链接或者通过npm安装，然后在html页面中通过script标签引入。

注意，使用这种方法进行排除后，需要自己手动在html页面中引入对应的cdn链接或者手动安装第三方库。如果该库在除此项目以外的地方用到了，引入方式也需要修改。

三、总结

基于vue-cli npm run build之后vendor.js文件过大的解决方法主要包括：按需引入第三方库和使用externals选项排除第三方库。两种方法各有优缺点，需要根据具体情况选择合适的方法。