【vue】配置cdn加速

//vue.config.jslet cdn = { css: [], js: [] };// 通过环境变量来区分是否使用cdnconst isDev = process.env.NODE_ENV === 'development'; // 判断是否是开发环境let externals = {};if (!isDev) {// 如果是非开发环境就排除打包否则不排除externals = {/

谭CV

3749人浏览 · 2021-11-10 11:02:46

谭CV · 2021-11-10 11:02:46 发布

//vue.config.js

let 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 = cdn
			return 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

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^