vue-cli4.0如何配置CDN加速

更新时间：2023年04月18日 14:30:48 作者：mrhaoxiaojun

这篇文章主要介绍了vue-cli4.0如何配置CDN加速问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教

vue-cli4.0配置CDN加速

vue.config.js出于对网站性能的要求，有时候我们不希望一些比较大的第三方库直接打包到最后的bundle中，而会选择在打包的时候忽略他们，并直接使用CDN上面的资源。

以下是vue-cli4的相关配置vue.config.js

cdn.config.js

module.exports = assetsCDN = {
  useCDN: false,
  // webpack build externals
  externals: {
    vue: 'Vue',
    'vue-router': 'VueRouter',
    vuex: 'Vuex',
    axios: 'axios',
    'view-design': 'iview'
  },
  css: [
    // '//cdn.jsdelivr.net/npm/view-design@4.3.2/dist/styles/iview.css'
  ],
  // 国内免费（猫云）CDN https://www.bootcdn.cn/
  // 国外免费（unpkg）CDN https://unpkg.com
  // 国外免费（jsdelivr）CDN https://www.jsdelivr.com/
  js: [
    '//cdn.jsdelivr.net/npm/vue@2.6.11/dist/vue.min.js',
    '//cdn.jsdelivr.net/npm/vue-router@3.1.6/dist/vue-router.min.js',
    '//cdn.jsdelivr.net/npm/vuex@3.1.3/dist/vuex.min.js',
    '//cdn.jsdelivr.net/npm/axios@0.19.0/dist/axios.min.js',
    '//cdn.jsdelivr.net/npm/view-design@4.3.2/dist/iview.min.js',
  ]
}

const assetsCDN = require('./config/cdn.config')
const isProd = process.env.NODE_ENV === 'production'
module.exports = {
  ...
  // 对vue-cli内部的 webpack 配置进行更细粒度的修改
  chainWebpack: config => {
    if (isProd) {
      ...
      // 添加自定义参数cdn
      config.plugin('html').tap(args => {
        args[0].cdn = assetsCDN.useCDN ? assetsCDN : {}
        return args
      })
    }
  },
  configureWebpack: (config) => {
    if (isProd) {
      ...
      if(assetsCDN.useCDN){
        // externals里的模块不打包
        config.externals = assetsCDN.externals
      }
    }
  }
}

解释一下如何寻找第三方库或者插件，大家可以自己去源码找暴露出来的全局对象就可以

externals: {
  vue: 'Vue',
   'vue-router': 'VueRouter',
   vuex: 'Vuex',
   axios: 'axios',
   'view-design': 'iview'
 },

然后将自定义的cdn地址，通过模板渲染添加到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" rel="external nofollow" >
    <title><%= htmlWebpackPlugin.options.title %></title>
    <!-- require cdn assets css 配置在vue.config.js下 -->
    <% for (var i in htmlWebpackPlugin.options.cdn && htmlWebpackPlugin.options.cdn.css) { %>
      <link rel="stylesheet" href="<%= htmlWebpackPlugin.options.cdn.css[i] %>" rel="external nofollow"  />
    <% } %>
  </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>
    <div id="app"></div>
    <!-- require cdn assets js 配置在vue.config.js下 -->
    <% for (var i in htmlWebpackPlugin.options.cdn && htmlWebpackPlugin.options.cdn.js) { %>
      <script type="text/javascript" src="<%= htmlWebpackPlugin.options.cdn.js[i] %>"></script>
    <% } %>
    <!-- built files will be auto injected -->
  </body>
</html>

到这里就配置结束了，可以看到修改前后的区别

这里是修改后的

总结

以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

vant/vue跨域请求解决方案
这篇文章主要介绍了vant/vue跨域请求解决方案,需要的朋友可以参考下
2022-12-12
vue3集成Element-plus实现按需自动引入组件的方法总结
vue3出来一段时间了,element也更新了版本去兼容vue3,下面这篇文章主要给大家介绍了关于vue3集成Element-plus实现按需自动引入组件的相关资料,文中通过示例代码介绍的非常详细,需要的朋友可以参考下
2022-07-07
IDEA创建Vue项目的两种方式总结
这篇文章主要介绍了IDEA创建Vue项目的两种方式总结，具有很好的参考价值，希望对大家有所帮助。
2023-04-04
element-plus+Vue3实现表格数据动态渲染
在Vue中,el-table是element-ui提供的强大表格组件,可以用于展示静态和动态表格数据,本文主要介绍了element-plus+Vue3实现表格数据动态渲染,感兴趣的可以了解一下
2024-03-03
Vue2中使用tailwindCss的详细教程
Tailwind CSS是一个流行的前端CSS框架,它基于原子设计原则,提供了一套预构建的CSS样式类,旨在帮助开发者快速地创建响应式、可定制的用户界面,本文给大家介绍了Vue2中使用tailwindCss的详细教程,需要的朋友可以参考下
2024-09-09
利用vue + koa2 + mockjs模拟数据的方法教程
这篇文章主要给大家介绍了关于利用vue + koa2 + mockjs模拟数据的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧。
2017-11-11
Vue-resource拦截器判断token失效跳转的实例
下面小编就为大家带来一篇Vue-resource拦截器判断token失效跳转的实例。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2017-10-10
如何解决npm i下载依赖的时候出现某依赖版本冲突
这篇文章主要介绍了如何解决npm i 下载依赖的时候出现某依赖版本冲突问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
2024-03-03
解决el-tree数据回显时子节点部分选中父节点都全选中的坑
本文主要介绍了解决el-tree数据回显时子节点部分选中父节点都全选中的坑，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2022-08-08
Vue实现英文字母大小写在线转换功能
在Web开发中,字符串处理是常见的需求之一,特别是在国际化应用中,对于文本的格式化处理尤为重要,本文将介绍如何使用Vue.js来构建一个简单的在线英文字母大小写转换工具,需要的朋友可以参考下
2024-09-09