最近工作中有一个老项目，是后端人员用公司pc端框架写的移动端项目，最近项目的使用量上来了，经常出现资源加载过慢卡死情况，排查了代码一看发现了使用了一堆依赖，还有pc端无用的组件代码，导致打包后的vendor.js文件达到5m多)：，最意外的是public文件有个叫做cdn的本地文件夹？？？通过npm run build --report 看了下，主要是引用了vant和elementUI依赖导致的，想到面试总问到怎么优化项目加载速度的问题，就想到引用外部cdn静态资源，下面就说说怎么操作：
- index.html引入外部cdn资源
到对应官网或者cdn 的一些网站，找到要引入的文件，复制到模板index.html中引用：
<head>
<link href="https://cdn.bootcdn.net/ajax/libs/element-ui/2.15.3/theme-chalk/index.min.css" rel="stylesheet">
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/vant@2.12/lib/index.css"
/>
</head>
<body>
<div id="app"></div>
<script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script>
<script src="https://cdn.bootcss.com/element-ui/2.12.0/index.js"></script>
<script src="https://cdn.bootcss.com/element-ui/2.12.0/locale/zh-CN.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vant@2.12/lib/vant.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.min.js"></script>
</body>
- 删除原来的项目依赖引用（import）
这项目中主要是main.js中全局注册的依赖，不删除会提示要install依赖，直接删除即可。
//import ElementUI from 'element-ui'
//import Vant from 'vant';
//import { Lazyload } from 'vant';
//import 'vant/lib/index.css';
//Vue.use(Lazyload);
//Vue.use(Vant);
//Vue.use(ElementUI, {
// size: 'medium',
// menuType: 'text'
//})
- vue.config.js中webpack的externals忽略打包
module.exports = {
...
chainWebpack: config => {
// 忽略的打包文件
config.externals({
vue: "Vue",//key是引入的资源的名称,value是该模块暴露给外部的名称
vant: "vant",
axios: "axios",
ElementUI: "element-ui"
'vue-router': 'VueRouter',
'vuex':'Vuex'
})
},
};