性能優化:Vue使用CDN


vue打包后部分資源包占用了較大的空間,故通過CDN方式,縮小打包體積。【以ElementUI為例】

 

修改index.html

<!-- 引入VUE -->
<script src="https://unpkg.com/vue@2.6.11/dist/vue.js"></script>
<!-- 引入ElementUI樣式 -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<!-- 引入ElementUI組件庫 -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>

 

修改vue.config,js

configureWebpack: {

  externals: {  

    // CDN 的 Element 依賴全局變量 Vue, 所以 Vue 也需要使用 CDN 引入

    'vue': 'Vue',

    // 屬性名稱 element-ui, 表示遇到 import xxx from 'element-ui' 這類引入 'element-ui'的,
    // 不去 node_modules 中找,而是去找 全局變量 ELEMENT
    'element-ui': 'ELEMENT',

  }

}

 

注:一定要在element-ui前引入vue

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM