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

56次阅读

共计 626 个字符,预计需要花费 2 分钟才能阅读完成。

  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>

以上。

正文完
 0