前端cdn优化-CSDN博客

本文链接：https://blog.csdn.net/qq_34612487/article/details/128677900

优化背景

由于项目中静态资源过多，导致项目首屏加载速度过慢

什么是cdn

CDN全称叫做“Content Delivery Network”，中文叫内容分发网络。我们用它来提高访问速度。

怎么做

把一些静态资源：css， .js，图片，视频放在第三方的CDN服务器上，可以加速访问速度。
使用CDN可以适当提高第三方插件的链接速度, 但是开发的时候我们还是可以在本地用npm下载, 但是上线后要配置cdn地址, 用户的浏览器默认还有缓存功能

步骤如下：

配置不需要打包的资源

1、这里我将一些基本的npm包放在了CDN服务器上，所以就需要进行webpack的配置，如下

// vue.config.js
 const assetsCDN = {
  // webpack build externals
  externals: {
    vue: 'Vue',
    'vue-router': 'VueRouter',
    vuex: 'Vuex',
    axios: 'axios'
  },
  css: [],
    //*** 是指cdn服务器的目录路径
  // https://unpkg.com/browse/vue@2.6.10/
  js: [
    '//***/utils/vue/dist/vue.min.js',
    '//***/utils/vue-router/dist/vue-router.min.js',
    '//***/utils/vuex/dist/vuex.min.js',
    //***/utils/axios/dist/axios.min.js'
  ]
}

2、注入cdn变量
由于在开发环境时，文件资源还是可以从本地 node_modules 中取出，而只有项目上线了，才需要去使用外部资源。此时我们可以使用环境变量来进行区分。
在这里插入图片描述
3、注入CDN配置到html模板
之后通过 html-webpack-plugin注入到 index.html之中:

chainWebpack(config) {
  // 注入cdn变量 (打包时会执行)
  config.plugin('html').tap(args => {
    args[0].cdn = CDN // 配置 CDN 给插件
    return args
  })
  // 省略其他...
}

<!-- index.html head内容 -->
<!-- require cdn assets css -->
<% for (var i in htmlWebpackPlugin.options.cdn && htmlWebpackPlugin.options.cdn.css) { %>
    <link rel="stylesheet" href="<%= htmlWebpackPlugin.options.cdn.css[i] %>" />
   <% } %>
    <!-- require cdn assets js -->
 <% for (var i in htmlWebpackPlugin.options.cdn && htmlWebpackPlugin.options.cdn.js) { %>
    <script type="text/javascript" src="<%= htmlWebpackPlugin.options.cdn.js[i] %>"></script>
   <% } %>