最近工作中有一个老项目，是后端人员用公司pc端框架写的移动端项目，最近项目的使用量上来了，经常出现资源加载过慢卡死情况，排查了代码一看发现了使用了一堆依赖，还有pc端无用的组件代码，导致打包后的vendor.js文件达到5m多)：，最意外的是public文件有个叫做cdn的本地文件夹？？？通过npm run build --report 看了下，主要是引用了vant和elementUI依赖导致的，想到面试总问到怎么优化项目加载速度的问题，就想到引用外部cdn静态资源，下面就说说怎么操作：
<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/[email protected]/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/[email protected]/lib/vant.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.min.js"></script>
</body>
//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'
})
},
};
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 [email protected] 举报，一经查实，本站将立刻删除。
