vue cdn引用

前言~~~

搭建vue项目时,如果使用了多插件的情况在打包的时候会全部加载进来,打成的包会很大,导致在加载程序的时候速度上会有一些影响,这时候就是用到了cdn这个东东

1、查找cdn的时候我用的是(360的奇舞团CDN)、(今日头条CDN)

360奇舞团地址:静态资源托管库

今日头条地址:字节跳动静态资源公共库

2、这里将以vue-echart举例,我们一般引用echart的时候都是直接引用,这时就像上所述在打包时出现资源较大的情况,所以使用了cdn,vue对于echart之类的插件都有很好的集成,这里可以使用(vue-资源)去cdn中进行查找

3、配置我们需要的cdn 引入js、css等这里 process.env.NODE_ENV === 'production' 对环境进行一个校验,默认是生产环境使用了cdn

注意:

1)、这里有几个注意的地方 vueEcharts 名字不是随意取的,在自己的cdn中查找一下如下:

2)、config里面各项配置说明见文章:config说明

上面描述完了,接下来就是加载cdn的过程 说一下个人的理解,系统启动时候会自动加载config.js,在预编译的时候把组件给加载进来,进行打包到html模板中,在public的index中配置对应的cdn去加载相当于一个生成文件的入口,打包的时候会将css和js放到这里面,之后在输出到目录里面

vue.config.js中配置的

module.exports = { devServer: { port: 12000, proxy: { '/manage': { target: 'http://localhost:24030', changeOrigin: true, ws: true, pathRewrite: { '^/manage': '/', }, }, }, }, chainWebpack: (config) => { if (process.env.NODE_ENV === 'production') { var externals = { vue: 'Vue', vuex: 'Vuex', echarts: 'echarts', 'element-ui': 'ELEMENT', 'vue-router': 'VueRouter', 'vue-echarts': 'VueECharts', } config.externals(externals) const cdn75 = { // 360的奇舞团CDN css: [ // element-ui.css 'https://lib.baomitu.com/element-ui/2.14.1/theme-chalk/index.min.css', ], js: [ // vue-echarts.js 'https://lib.baomitu.com/vue-echarts/6.0.2/index.umd.min.js', ], } const cdnToutiao = { // 今日头条CDN css: [ // element-ui.css 'https://lf9-cdn-tos.bytecdntp.com/cdn/expire-1-y/element-ui/2.14.1/theme-chalk/index.min.css', ], js: [ // vue-echarts.js 'https://lf9-cdn-tos.bytecdntp.com/cdn/expire-1-y/vue-echarts/6.0.2/index.umd.min.js', ], } const jsDelivr = { // 今日头条CDN css: [ // element-ui.css 'https://cdn.jsdelivr.net/npm/element-ui@2.14.1/lib/theme-chalk/index.css', ], js: [ // vue-echarts.js 'https://cdn.jsdelivr.net/npm/vue-echarts@6.0.2/dist/index.umd.min.js', ], } config.plugin('html').tap((args) => { args[0].cdn75 = cdn75 args[0].cdnToutiao = cdnToutiao args[0].jsDelivr = jsDelivr return args }) } }, } 

.public/index.html(重点不是全部复制哈,这里是引入了对应的样式和js,有校验的前提)

<!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"> <meta http-equiv="program" content="no-cache"> <meta http-equiv="cache-control" content="no-cache, no-store, must-revalidate"> <link rel="icon" href="/favicon.ico" type="image/x-icon"> <title><%= htmlWebpackPlugin.options.title %></title> <!-- 引入样式 --> <% if (process.env.NODE_ENV === 'production') { %> <% for(var css of htmlWebpackPlugin.options.cdn75.css) { %> <link rel="stylesheet" href="<%=css%>" as="style"> <% } %> <% } %> </head> <body> <noscript> <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong> </noscript> <!-- 引入JS --> <% if (process.env.NODE_ENV === 'production') { %> <% for(var js of htmlWebpackPlugin.options.cdn75.js) { %> <script src="<%=js%>"></script> <% } %> <% } %> <div id="app"> <div>正在加载系统资源,请耐心等待</div> </div> <!-- built files will be auto injected --> </body> </html> 

原文链接:https://blog.csdn.net/MoRan_Lei/article/details/123825080?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522165918321816780357281357%2522%252C%2522scm%2522%253A%252220140713.130102334.pc%255Fblog.%2522%257D&request_id=165918321816780357281357&biz_id=0&utm_medium=distribute.pc_search_result.none-task-blog-2~blog~first_rank_ecpm_v1~times_rank-26-123825080-null-null.nonecase&utm_term=cdn

原创文章,作者:优速盾-小U,如若转载,请注明出处:https://www.cdnb.net/bbs/archives/281

(0)
上一篇 2022年8月5日
下一篇 2022年8月5日

相关推荐

发表回复

您的电子邮箱地址不会被公开。 必填项已用*标注

优速盾注册领取大礼包www.cdnb.net
/sitemap.xml