如何将 vue-router、UI框架等第三方从打包文件中抽取出来

通常用webpack打包vue项目后会有一个vendors的js。这里面包含了我们项目引入的所有第三方工具和部分业务代码。所以基本打包完后vendors文件都非常大。下面就是如何把第三方工具从vendors中提取出来。

首先要说明的是：
如果要将依赖于Vue的第三方工具提取出来，那么首先要将Vue提取出来。因为存在引用的先后顺序问题，如果只提取第三方工具的话会导致第三方工具找不到Vue实例。

下面直接上一个简单示例，一目了然。
假设我们要将vue-router及iview从vendors中提取出来：

1. index.html

2. vue.config.js

module.exports = {
    //  other options

    configureWebpack: {
        externals: {
            'vue': 'Vue',
            'vue-router': 'VueRouter',
            'iview': 'iview',
        }
    }
}

3. 将main.js、router.js、只要引入了vue、vue-router、iview的地方都删掉，像这样：

//
// import Vue from 'vue';
import App from './App.vue';
import router from './router';
import store from './store';

//  axios
import axios from 'axios';
axios.defaults.baseURL = 'http://localhost:8082';
axios.defaults.withCredentials = true;
Vue.prototype.$ajax = axios;

//  iview组件
// import iview from 'iview';
// import 'iview/dist/styles/iview.css';
// Vue.use(iview);

好了，基本就是以上三个步骤：外部引入第三方、webpack配置中排除第三方、项目中取消第三方引用。

结束语：
其实这个需求根据项目实际情况判断需不需要吧，如果有必要的话可以把所有非业务代码的第三方工具全部提取出来。也完全可以一个不提取。
因为实际中如果vendors本身不超过3M的话，个人认为是可以接受的，毕竟现在带宽都上来了。
如果提取的太多反倒增加了请求量，浏览器本身并行的请求数量好像是5吧？（忘了，不是很确定）
我觉得如果让我选择：请求一个5M的文件还是请求50个0.1M的文件，我会选择前者。
当然了，举这个例子只是为了说明不同的选择。具体情况还是根据自己的项目了。5M分成5个1M的并行下载何乐而不为这谁都知道。