一对一视频聊天源码，使用CDN减小代码体积加快请求速度

一对一视频聊天源码，使用CDN减小代码体积加快请求速度
在一对一视频聊天源码开发中，我们会用到很多第三方库，如果可以按需引入，我们可以只引入自己需要的组件，来减少所占空间，
但也会有一些不能按需引入，我们可以采用CDN外部加载，在index.html中从CDN引入组件，去掉其他页面的组件import，修改webpack.base.config.js，在externals中加入该组件，这是为了避免编译时找不到组件报错。
所以使用CDN主要解决两个问题：
1、打包时间太长、打包后代码体积太大，请求慢
2、服务器网络不稳带宽不高，使用cdn可以回避服务器带宽问题
我们将vue，vue-router，vuex，axios，echarts，element，moment使用CDN资源引入。国内的CDN服务推荐使用bootCDN
1. 在index.html里引入线上cdn，为了方便后续引用其他资源的cdn，所以我们需要把index.html里面的引入cdn配置成动态的。

<html>
  ...
  <body>
    <!-- 使用CDN加速的JS文件，配置在vue.config.js下 -->
    <% for (var i in
    htmlWebpackPlugin.options.cdn&&htmlWebpackPlugin.options.cdn.js) { %>
    <script src="<%= htmlWebpackPlugin.options.cdn.js[i] %>"></script>
    <% } %>
  </body>
</html>

2. 在vue.config.js配置中配置是为了在加载的时候，引用cdn资源 而不是node_modules里的包

....
const externals = {
  vue: 'Vue',
  'vue-router': 'VueRouter',
  vuex: 'Vuex',
  axios: 'axios'
}
....
configureWebpack: config => {
    if (isProduction) { // 判断是否是生产环境的包
      Object.assign(config, {
        externals: externals
      })
    }
    config.module.unknownContextCritical = false
  }

同时注销掉main.js文件当中的import

以上就是一对一视频聊天源码，使用CDN减小代码体积加快请求速度， 更多内容欢迎关注之后的文章

posted @ 2025-05-24 10:28  云豹科技-苏凌霄  阅读(13)  评论(0)    收藏  举报