• 我转过几个弯 绕过那个小雨楼
  • 拿着蒲扇摆着衣衫渡着紧箍咒
  • 不问天涯不停留 喝过几壶酒
  • 不过年少白头道义放胸口
  • 倘若明天之后 遥看前尘剑封侯
  • 似那天上神仙无所求
  • 朝朝暮暮君如梦醒十分不为何理由
  • 是真是假是惶恐是无休
  • 路过这风雨花满楼 片刻都不停留
  • 我本这书生进京赶考留下许多愁
  • 你问有没有时候 我叹这天道默悠悠
  • 能否与我一醉方休
  • 又过了几个弯 算尽天量道莫慌
  • 踏这田园闻这芳草香
  • 跌跌撞撞仗剑天涯折煞不枉无笔良
  • 是梦是幻是温柔是家乡
  • 路过这风雨花满楼 片刻都不停留
  • 我本这书生进京赶考留下许多愁
  • 你问有没有时候 我叹这天道默悠悠
  • 能否与我一醉方休
  • 路过这风雨花满楼 片刻都不停留
  • 我本这书生进京赶考留下许多愁
  • 你问有没有时候 我叹这天道默悠悠
  • 能否与我一醉方休
  • 谁能与我一醉方休

vue cli4 配置静态cdn资源

对于打包的优化,除gzip和按需引入,就只有cdn是效果最明显的了。

首先使用cdn我们要明确一个事实,就是我们cdn加载的文件,他是没有所谓的按需引入的概念,他就是一个完整的包,顶多给你分为基础包、核心包、完整包啥的。

所以,引入是定死的,不可能说你用到什么功能自动引入什么功能,那是本地打包才能做到的。

就好比如element ui ,本地打包,我可以按需引入,用到什么引入什么,然后生成一个js文件,但是cdn,你要么就引入全部功能,要么就自己本地,只能这么二选一。

所以,对于像element ui 这种框架的打包优化,如果你是按需引入,你可能需要调整为完整引入,因为最终打包使用的是cdn资源,所以,对于速度可能不需要太担心。

教程

打开vue.config.js

填写一下代码

module.exports = {
  chainWebpack: config => {
    //生产环境下
    if (process.env.NODE_ENV === "production") {
      config.plugin('html')
        .tap(args => {
          args[0].cdn = {
            js: [        "https://cdn.jsdelivr.net/npm/vue@2.6.11/dist/vue.min.js",
              "https://cdn.jsdelivr.net/npm/vue-router@3.2.0/dist/vue-router.min.js",             'https://cdn.jsdelivr.net/npm/vuex@3.4.0/dist/vuex.min.js',           "https://cdn.jsdelivr.net/npm/axios@0.20.0/dist/axios.min.js",
            ]

          }

          return args

        })
    
    }
  
  },
  configureWebpack: config => {
    config.externals = {
      vue: 'Vue',
      vuex: 'Vuex',
      'vue-router': 'VueRouter',
      'axios': 'axios',
    }

  },
}

保存

再找到public/index.html 打开

在body的底部添加模板语法自动遍历需要cdn引入的js文件

  <!-- 使用CDN的JS文件 -->
  <% for (var i in htmlWebpackPlugin.options.cdn &&
    htmlWebpackPlugin.options.cdn.js) { %>
  <script src="<%= htmlWebpackPlugin.options.cdn.js[i] %>"></script>
  <% } %>
  <!-- 使用CDN的JS文件 -->

这样,我们对vue、vuex、router、axios这四个必备的功能进行的cdn静态资源加速。

使用文件打包分析,你会发现,已经没有了这四个js文件的包了,说明我们的设置是有效的。

补充

这里补充一个elment-ui的加速

打开vue.config.js

填写一下代码

module.exports = {
  chainWebpack: config => {
    //生产环境下
    if (process.env.NODE_ENV === "production") {
      config.plugin('html')
        .tap(args => {
          args[0].cdn = {
            css: [
              'https://cdn.jsdelivr.net/npm/element-ui@2.4.5/lib/theme-chalk/index.css'
             ],
            js: [        "https://cdn.jsdelivr.net/npm/vue@2.6.11/dist/vue.min.js",
              "https://cdn.jsdelivr.net/npm/vue-router@3.2.0/dist/vue-router.min.js",             'https://cdn.jsdelivr.net/npm/vuex@3.4.0/dist/vuex.min.js',           "https://cdn.jsdelivr.net/npm/axios@0.20.0/dist/axios.min.js",
            ]

          }

          return args

        })
    
    }
  
  },
  configureWebpack: config => {
    config.externals = {
      vue: 'Vue',
      vuex: 'Vuex',
      'vue-router': 'VueRouter',
      'axios': 'axios',
      "element-ui": "ELEMENT",
    }

  },
}

再找到public/index.html 打开

在head里面添加

  <!-- 使用CDN的CSS文件 -->
  <% for (var i in htmlWebpackPlugin.options.cdn &&
      htmlWebpackPlugin.options.cdn.css) { %>
  <link href="<%= htmlWebpackPlugin.options.cdn.css[i] %>" rel="stylesheet" />
  <% } %>
  <!-- 使用CDN的CSS文件 -->

在body底部添加

  <!-- 使用CDN的JS文件 -->
  <% for (var i in htmlWebpackPlugin.options.cdn &&
    htmlWebpackPlugin.options.cdn.js) { %>
  <script src="<%= htmlWebpackPlugin.options.cdn.js[i] %>"></script>
  <% } %>
  <!-- 使用CDN的JS文件 -->

这样就行了。

0
  • 本文分类:vue 项目实战
  • 本文标签:vuevue cli静态资源cdn
  • 流行热度:已超过 149 人围观了本文
  • 最后更新:2020年10月30日 - 15时44分19秒
  • 发布日期:2020年10月30日 - 13时55分00秒
  • 版权申明:本文系作者@木灵鱼儿原创发布在木灵鱼儿 - 有梦就能远航站点。未经许可,禁止转载。

相关文章

微信收款码
微信收款码