关于vue.js:vue-项目中以cdn引入的方式使用插件-减少打包体积

在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>

在vue.config.js中配置插件，缩小打包体积
通过 webpack 的 externals 节点，来配置并加载内部的 CDN 资源。但凡申明在 externals 中的第三方依赖包，都不会被打包。
```
 configureWebpack: config => {    Object.assign(config, {      externals: {        pinyinPro: 'pinyin-pro'      }    })   }
```

在 .eslintrc.js 中配置globals (如果应用了eslint)

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

index.vue 中应用

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

以上。