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>

以上。

Every day deserves to be expected

vue 项目优化：引入cdn使用插件， 减少打包体积

vue 项目优化：引入cdn使用插件，减少打包体积