vue效能優化2--引入cdn
阿新 • • 發佈：2018-11-13
當我們載入頁面時，需要將我們所需要的一些依賴載入到當前會話中然後再開始執行，如果我們首屏，模組比較多是，需要等待的時間會比較長，而且。瀏覽器記憶體最多執行四十個程序，需要等到載入完前面的才能執行後面的程式碼，如果我們採用cdn的方式來引入一些第三方資源，就可以緩解我們伺服器的壓力，原理是將我們的壓力分給其他伺服器點。
配置
首頁引入這些cdn，index.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width,initial-scale=1.0"> <link rel="icon" href="<%= BASE_URL %>favicon.ico"> <script src="https://cdn.bootcss.com/vue/2.5.2/vue.min.js"></script> <scriptsrc="https://cdn.bootcss.com/vue-router/3.0.1/vue-router.min.js"></script> <title>mytest</title> </head> <body> <noscript> <strong>We're sorry but mytest doesn't work properly without JavaScript enabled. Please enable it to continue.</strong> </noscript> <div id="app"></div> <!-- built files will be auto injected --> </body> </html>
然後在vue.config.js新增webpack的externals屬性即可
module.exports = { baseUrl:'./', configureWebpack: { //使用cdn，不想讓webpack打包進去 externals: { "vue": "Vue", "vue-router": "VueRouter" } }, chainWebpack: config => { // 移除 prefetch 外掛 config.plugins.delete('prefetch') } }
效果
按照官方文件的解釋，如果我們想引用一個庫，但是又不想讓webpack打包，並且又不影響我們在程式中以CMD、AMD或者window/global全域性等方式進行使用，那就可以通過配置externals。這個功能主要是用在建立一個庫的時候用的