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>

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

    通过 webpack 的 externals 节点，来配置并加载外部的 CDN 资源。凡是声明在 externals 中的第三方依赖包，都不会被打包。
     configureWebpack: config => {
    Object.assign(config, {
      externals: {
        pinyinPro: 'pinyin-pro'
      }
    })
   }

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

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

  1. index.vue 中使用

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

以上。

posted @ 2021-11-04 11:33  doublealoe  阅读(508)  评论(0)  编辑  收藏  举报