- 问题： 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 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> <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', 'element-ui': 'ELEMENT', } } main.js文件:
注释相应的引入代码
其他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://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.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://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> 原文链接：https://blog.csdn.net/qq_45240616/article/details/116480337?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522165918321816782184659334%2522%252C%2522scm%2522%253A%252220140713.130102334.pc%255Fblog.%2522%257D&request_id=165918321816782184659334&biz_id=0&utm_medium=distribute.pc_search_result.none-task-blog-2~blog~first_rank_ecpm_v1~times_rank-11-116480337-null-null.nonecase&utm_term=cdn
原创文章，作者：优速盾-小U，如若转载，请注明出处：https://www.cdnb.net/bbs/archives/247
