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'
 },

vue-cli4.0怎么配置CDN加速

然后将自定义的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>

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

vue-cli4.0怎么配置CDN加速

这里是修改后的

vue-cli4.0怎么配置CDN加速

vue-cli4.0怎么配置CDN加速

原创文章,作者:IIKKA,如若转载,请注明出处:http://www.wangzhanshi.com/n/12575.html

(0)
IIKKA的头像IIKKA
上一篇 2025年1月1日 17:07:13
下一篇 2025年1月1日 17:07:15

相关推荐

  • 如何应对高并发

    #高并发应对方案 架构方面 分层 对系统架构的分层,分为展示层,业务层,服务层,数据层等,可以使得分工明确,实现解耦,便于管理 按业务种类分层,可以实现服务化,解耦。 分布式(即模…

    CDN加速 2025年1月1日
  • CDN基本技术原理是什么

    CDN基本技术原理 内容分发网络(cdn)采用智能路由和流量管理技术,及时发现能够给访问者提供最快响应的加速节点,并将访问者的请求导向到该加速节点,由该加速节点提供内容服务。利用内…

    2025年1月1日
  • 怎么样选择cdn厂商

    与其他CDN服务商相比,网站那些事CDN的主要优势包括稳定快速、性价比高、简单易用、高效智能。比较多的用户会问到稳定快速这个优点,一般来说,网站那些事的CDN特点是分担源站压力,避…

    2025年1月1日
  • 怎么用全站CDN部署Discourse论坛

    Discourse 介绍 Discourse 是一款由 Stack Overflow 的联合创始人——Jeff Atwood,基于 Ruby on Rails 开发的开源论坛。相较…

    2025年1月1日
  • 一般来说cdn是啥

    用户在购买网站那些事的CDN服务之后,在使用过程中会比较关心是否有实际效果,首先大家要先确保是否已经开通成功,然后按照基本步骤添加加速域名、配置CNAME,这些都成功搞定之后,接下…

    2025年1月1日
  • 国内哪个cdn比较好

    用户在购买网站那些事的CDN服务之后,在使用过程中会比较关心是否有实际效果,首先大家要先确保是否已经开通成功,然后按照基本步骤添加加速域名、配置CNAME,这些都成功搞定之后,接下…

    2025年1月1日
  • cdn加速可以解决什么问题

    与其他CDN服务商相比,网站那些事CDN的主要优势包括稳定快速、性价比高、简单易用、高效智能。比较多的用户会问到稳定快速这个优点,一般来说,网站那些事的CDN特点是分担源站压力,避…

    2025年1月2日
  • cdn真的好用吗

    用户在购买网站那些事的CDN服务之后,在使用过程中会比较关心是否有实际效果,首先大家要先确保是否已经开通成功,然后按照基本步骤添加加速域名、配置CNAME,这些都成功搞定之后,接下…

    2025年1月2日
  • cdn能加速的原理是什么

    用户在购买网站那些事的CDN服务之后,在使用过程中会比较关心是否有实际效果,首先大家要先确保是否已经开通成功,然后按照基本步骤添加加速域名、配置CNAME,这些都成功搞定之后,接下…

    2025年1月2日
  • CDN技术有哪些优点

    概念 CDN这个概念相信大家都比较耳熟,到底什么是CDN呢? CDN,全称为Content Delivery Network,即内容分发网络。 其基本思路是尽可能避开互联网上有可能…

    2025年1月1日

发表回复

登录后才能评论