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文件 -->

这样就行了。