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

更新時(shí)間：2023年04月18日 14:30:48 作者：mrhaoxiaojun

這篇文章主要介紹了vue-cli4.0如何配置CDN加速問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教

vue-cli4.0配置CDN加速

vue.config.js出于對(duì)網(wǎng)站性能的要求，有時(shí)候我們不希望一些比較大的第三方庫(kù)直接打包到最后的bundle中，而會(huì)選擇在打包的時(shí)候忽略他們，并直接使用CDN上面的資源。

以下是vue-cli4的相關(guān)配置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'
  ],
  // 國(guó)內(nèi)免費(fèi)（貓?jiān)疲〤DN https://www.bootcdn.cn/
  // 國(guó)外免費(fèi)（unpkg）CDN https://unpkg.com
  // 國(guó)外免費(fèi)（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 = {
  ...
  // 對(duì)vue-cli內(nèi)部的 webpack 配置進(jìn)行更細(xì)粒度的修改
  chainWebpack: config => {
    if (isProd) {
      ...
      // 添加自定義參數(shù)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
      }
    }
  }
}

解釋一下如何尋找第三方庫(kù)或者插件，大家可以自己去源碼找暴露出來(lái)的全局對(duì)象就可以

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

然后將自定義的cdn地址，通過(guò)模板渲染添加到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>

到這里就配置結(jié)束了，可以看到修改前后的區(qū)別