短视频软件开发，CDN使用有大讲究

短视频软件开发，CDN使用有大讲究

vue 项目中以cdn引入的方式使用插件， 减少打包体积

1、在index.html 中通过script 标签引入cdn链接

<html lang="zh">
  <head>
    <title>vue-demo</title>
    <script src="https://cdn.jsdelivr.net/gh/zh-lx/pinyin-pro@latest/dist/pinyin-pro.js">这是引入的cdn链接</script>
    </head>
  <body>
    <div id="app"></div>
  </body>
</html>

2、在vue.config.js中配置插件， 减少打包体积

通过 webpack 的 externals 节点，来配置并加载外部的 CDN 资源。凡是声明在 externals 中的第三方依赖包，都不会被打包。

 configureWebpack: config => {
    Object.assign(config, {
      externals: {
        pinyinPro: 'pinyin-pro'
      }
    })
   }

3、在 .eslintrc.js 中配置globals (如果使用了eslint)

module.exports = {
 ...
  globals: {
    pinyinPro: 'readonly' // readonly = true
  }
 }

4、index.vue 中使用

// script 中引入
<script>
    const { pinyin } = pinyinPro
    const test = pinyin('阳光明媚')
    console.log(test) // yang guang ming mei
</script>

以上就是短视频软件开发，CDN使用有大讲究， 更多内容欢迎关注之后的文章

posted @ 2025-12-20 09:42  云豹科技-苏凌霄  阅读(1)  评论(0)    收藏  举报