【vue】配置cdn加速

//vue.config.jslet cdn = { css: [], js: [] };
// 通过环境变量 来区分是否使用cdn
const isDev = process.env.NODE_ENV === 'development'; // 判断是否是开发环境
let externals = {};
if (!isDev) {// 如果是非开发环境 就排除打包 否则不排除externals = {// key(包名) / value(这个值 是 需要在CDN中获取js, 相当于 获取的js中 的该包的全局的对象的名字)'vue': 'Vue',// 后面的名字不能随便起 应该是 js中的全局对象名'vue-router': 'VueRouter',moment: 'moment','ant-design-vue': 'antd','axios': 'axios'}cdn = {css: ['https://cdn.jsdelivr.net/npm/ant-design-vue@1.7.2/dist/antd.min.css', // 提前引入ant design vue样式], // 放置css文件目录js: ['https://cdn.jsdelivr.net/npm/vue@2.6.11/dist/vue.min.js', // vuejs'https://cdn.jsdelivr.net/npm/vue-router@3.2.0/dist/vue-router.min.js','https://cdn.jsdelivr.net/npm/moment@2.29.1/moment.min.js',  // 必须先引入moment，否则报错“TypeError: Cannot read property 'default' of undefined”'https://cdn.jsdelivr.net/npm/moment@2.29.1/locale/zh-cn.js', // 需同步引入语言包，否则日期选择控件等将默认显示为英文'https://cdn.jsdelivr.net/npm/ant-design-vue@1.7.2/dist/antd.min.js', // ant design vue'https://cdn.jsdelivr.net/npm/axios@0.21.0/dist/axios.min.js']// 放置js文件目录}
}module.exports = {configureWebpack: {// 排除打包的某些选项externals: externals},chainWebpack: config => {//  注入cdn的变量到index.html中config.plugin('html').tap((arg) => {arg[0].cdn = cdnreturn arg})  },}

//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.0"><link rel="icon" href="<%= BASE_URL %>favicon.ico"><title><%= htmlWebpackPlugin.options.title %></title><!-- 引入css-cdn的文件 --><% for(var css of htmlWebpackPlugin.options.cdn.css) { %><link rel="stylesheet" href="<%=css%>"><% } %></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-cdn文件 --><% for(var js of htmlWebpackPlugin.options.cdn.js) { %><script  src="<%=js%>" ></script><% } %><div id="app"></div></body><script>if (!!window.ActiveXObject || "ActiveXObject" in window) {document.body.innerHTML = '<div class="back-main"><div class="login--main"><div class="login-error"><div class="login-error-title">浏览器不支持</div><div class="login-error-content"><div class="login-error-icon"><i class="icon-uniEA30"></i></div><p>IE 浏览器不支持 </p ><p>请使用最新Chrome, Firefox, Safari浏览器. </p ></div></div></div></div>'}</script>
</html>

tips：css文件放在head中，js文件最好放在body内部的最上面，否则很可能出现某某对象未定义的问题

使用cdn的包，会被从主包中分离出去，有效的减小主包的体积。

最后解答一个问题：

在做cdn时百度了很多，经常看到说要注释import引入的包(cdn)，其实是不用的。一旦你注释掉，就意味着不能切换npm环境和cdn环境。

最后，看到一个gzip优化写的很好的博客，分享一下：vue打包时gzip压缩的两种方案_一只前端小菜鸟-CSDN博客

【vue】配置cdn加速相关推荐

Onvif/RTSP安防流媒体服务-配置CDN加速互联网直播
1.相关资料入口腾讯云LVB QQ群 615081503 2.加速说明 2.1. 腾讯LVB加速 2.1.1. 开通服务腾讯云视频LVB开通入口 2.1.2. 登录进入控制台腾讯云直播控制台 2 ...
华为云OBS配置CDN加速
华为云OBS配置CDN加速简介 CDN 利用全局负载均衡技术将用户的访问指向离用户最近的工作正常的流媒体服务器上,由流媒体服务器直接响应用户的请求.服务器中如果没有用户要访问的内容,会根据配置自动从 ...
网站如何配置CDN加速？网站域名接入腾讯云CDN的步骤（附CDN防御）
目录什么是CDN? CDN原理: 接入CDN加速后有什么作用? 网站域名接入CDN加速的步骤 1.开通CDN服务 2.接入域名 3.配置CNAME CDN防御配置 1.用量封顶配置 2.防盗链配置 ...
七牛云申请空间及配置CDN加速
1. 注册七牛云 2. 进入控制台-对象存储界面 3. 新建存储空间如上图中: test即为Bucket名称 http://proirpgeq.bkt.clouddn.com/ 为七牛云CDN域名( ...
WP Super Cache+七牛云配置CDN加速，让你的网站秒开
CDN加速网站是几乎所有的站长都在考虑的问题,CDN,全称是Content Delivery Network,即内容分发网络.所谓CDN加速,通俗的来说就是把原服务器上数据复制到其他服务器上,用户访问 ...
vue-cli4.0 配置CDN加速
vue.config.js 出于对网站性能的要求,有时候我们不希望一些比较大的第三方库直接打包到最后的bundle中,而会选择在打包的时候忽略他们,并直接使用CDN上面的资源. 以下是vue-cli4 ...
vue 优化CDN加速
代码敲完,项目上线,然后就要与优化相遇. 项目有抢购的性质content download 时间非常的长加载慢的很,至此开始前端优化之旅项目根目录运行 npm install webpack-bun ...
Cloudflare配置网站免费CDN加速使用教程
前言: 如果是云服务器配置CDN,可以参考下面的教程: 网站如何配置CDN加速?网站域名接入CDN加速的步骤说到免费的CDN加速,很多人都知道Cloudflare,它可以免费CDN加速,同时也可以隐 ...
云小课｜CDN第5课 CDN入门之—我的网站可以用CDN加速吗？
摘要:CDN(Content Delivery Network,内容分发网络)通过将源站资源缓存到遍布各地的边缘节点服务器上,用户可以就近获取资源,从而达到加速的效果. 本文分享自华为云社区<[ ...
海外虚拟主机空间：如何使用CDN加速提升用户体验？
随着互联网的迅速发展和全球化的趋势,越来越多的企业和个人选择海外虚拟主机空间.然而,由于服务器的地理位置和网络延迟等原因,这些网站在国内访问时可能会遇到较慢的加载速度和不稳定的用户体验.为了解决这一问 ...

【vue】配置cdn加速

【vue】配置cdn加速相关推荐

最新文章

热门文章