通常用webpack打包vue项目后会有一个vendors的js。这里面包含了我们项目引入的所有第三方工具和部分业务代码。所以基本打包完后vendors文件都非常大。下面就是如何把第三方工具从vendors中提取出来。
首先要说明的是：
如果要将依赖于Vue的第三方工具提取出来，那么首先要将Vue提取出来。因为存在引用的先后顺序问题，如果只提取第三方工具的话会导致第三方工具找不到Vue实例。
下面直接上一个简单示例，一目了然。
假设我们要将vue-router及iview从vendors中提取出来：
- index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
<link href="https://cdn.bootcss.com/iview/3.2.2-rc.1/styles/iview.css" rel="stylesheet">
<title>Ryan Lee's Blog</title>
</head>
<body>
<noscript>
<strong>We're sorry but vuecli doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
</noscript>
<div id="app"></div>
<script src="https://cdn.bootcss.com/vue/2.6.4/vue.min.js"></script>
<script src="https://cdn.bootcss.com/vue-router/3.0.2/vue-router.min.js"></script>
<script src="https://cdn.bootcss.com/iview/3.2.2-rc.1/iview.min.js"></script>
</body>
</html>
- vue.config.js
module.exports = {
// other options
configureWebpack: {
externals: {
'vue': 'Vue',
'vue-router': 'VueRouter',
'iview': 'iview',
}
}
}
- 将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的并行下载何乐而不为这谁都知道。
网友评论