cdn引入
·
- 问题： weback打包工程后，由于初次加载页面时，页面加载时间过长；
- 原因是：查看F12，network一栏中，会发现
chunk-vendors.e852d541.js这个chunk在页面加载时，会花费大量的时间；这个chunk是element-ui全部引入或部分引入，打包后生成的，体积很大； - 解决方案： cdn引入配置
- 配置详情：
public/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,minimum-scale=1,maximum-scale=1,user-scalable=no">
<!-- <link rel="stylesheet" href="//at.alicdn.com/t/font_830376_qzecyukz0s.css"> -->
<link href="https://cdn.bootcdn.net/ajax/libs/element-ui/2.13.0/theme-chalk/index.css" rel="stylesheet">
<title>vue</title>
</head>
<body>
<div id="app"></div>
<!-- cnd引入element-ui的时候，一定要先引入vue，因为为element-ui是在vue的基础上编写的；否则会造成element-ui引入失效 -->
<script src="https://cdn.bootcss.com/vue/2.5.2/vue.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/element-ui/2.13.0/index.js"></script>
</body>
</html>
vue.config.js文件
configureWebpack: {
externals: {
'vue': 'Vue',
// 'vue-router': 'VueRouter',
// 'vuex': 'Vuex',
// 'axios':'axios',
'element-ui': 'ELEMENT',
// "mavon-editor": "MavonEditor",
// "highlight.js":"hljs"
}
}
main.js文件:
注释相应的引入代码
// import Vue from 'vue';
// import ElementUI from 'element-ui';
// import 'element-ui/lib/theme-chalk/index.css'; // 默认主题
// import './assets/css/theme-green/index.css'; // 浅绿色主题
// Vue.use(ElementUI, {
// size: 'small'
// });
其他cdn引入
<!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">
<title>李振恒的个人博客</title>
<!-- 引入样式 -->
<link href="https://cdn.bootcdn.net/ajax/libs/element-ui/2.13.0/theme-chalk/index.css" rel="stylesheet">
<!-- <link rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/10.5.0/styles/atelier-lakeside-light.min.css"> -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@10.5.0/build/styles/atelier-lakeside-light.min.css">
</head>
<body>
<div id="app"></div>
<script src="https://cdn.bootcss.com/vue/2.5.2/vue.min.js"></script>
<!-- <script src="https://cdn.bootcss.com/vue-router/3.0.1/vue-router.min.js"></script> -->
<script src="https://cdn.bootcss.com/vue-router/3.1.3/vue-router.min.js"></script>
<script src="https://cdn.bootcss.com/vuex/3.0.1/vuex.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/element-ui/2.13.0/index.js"></script>
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
<!-- <script src=" https://cdnjs.cloudflare.com/ajax/libs/highlight.js/10.5.0/highlight.min.js"></script> -->
<script src="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@10.5.0/build/highlight.min.js"></script>
<script src="https://cdn.jsdelivr.net/gh/zhaokuohaha/mavonEditor@feature/lib-name/dist/mavon-editor.js"></script>
</body>
</html>
更多推荐
0
0- 0
已为社区贡献2条内容
所有评论(0)