木灵鱼儿

木灵鱼儿

阅读:724

最后更新:2020/10/30/ 15:44:19

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
文章被阅读 724

相关文章

目录树