Vue使用CDN引用項目組件，減少項目體積的步驟
Vue項目打包后有的文件動輒幾百KB或幾M，這對一個前端項目的加載無疑是致命的。當你的服務器部署在阿里云或亞馬遜，每秒只有100kb的加載速度時，頁面的載入速度絕對讓你崩潰。那么有什么辦法可以在依舊是100kb/s的加載速度下讓我們的頁面快起來呢？CDN算是其中之一的解決辦法。
首先，我們要明白為什么我的Vue項目在打包后產生的文件會那么大。我們在最開始使用Vue的時候幾乎所有組件、插件的引用都會放到項目主文件中進行即 main.js文件，我們的引用方式可能是這樣的：
import Vue from 'vue' import App from './App' import Router from 'vue-router' import ElementUI from 'element-ui' import axios from 'axios' import 'element-ui/lib/theme-chalk/index.css' import cookies from 'vue-cookies' import qs from 'qs' import store from './store'
項目在打包的時候就會去自動查找依賴，并將依賴文件全部打入到項目中去，正是這些依賴的文件的存在導致了整個項目文件的體積龐大了起來。但是依賴文件又是必須的，總不可能把依賴文件刪除了不是。CDN的出現(xiàn)就為上述情況提供了一種解決方案。
CDN全稱Content Delivery Network，即內容分發(fā)網(wǎng)絡。CDN是構建在現(xiàn)有網(wǎng)絡基礎之上的智能虛擬網(wǎng)絡，依靠部署在各地的邊緣服務器，通過中心平臺的負載均衡、內容分發(fā)、調度等功能模塊，使用戶就近獲取所需內容，降低網(wǎng)絡擁塞，提高用戶訪問響應速度和命中率。
Vue中使用CDN就相當于是將原本自己項目所需要下載的依賴文件交由用戶的網(wǎng)絡進行下載，Vue中僅僅保持對依賴文件的引用即可。主要需要改動的有兩個地方一個是Vue的index.html,以及build目錄下的webpack.base.conf.js，廢話不多說，上代碼：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1.0"> <title>Demo index html</title> <link rel="stylesheet" rel="external nofollow" > </head> <body> <div id="app"></div> <!-- built files will be auto injected --> <script src="https://cdn.jsdelivr.net/npm/vue@2.6.0"></script> <script src="https://cdn.jsdelivr.net/npm/vue-router@3.1.3"></script> <script src="https://cdn.jsdelivr.net/npm/js-md5@0.7.3"></script> <script src="https://cdn.jsdelivr.net/npm/element-ui@2.12.0/lib/index.js"></script> </body> </html>
所引用的資源文件Url分為幾部分：
第一部分：https://cdn.jsdelivr.net/npm 指定當前資源下載站點，與之類似的還有UNPKG、cdnjs.com、BootCDN等。個人比較推薦使用jsdelivr，速度比較穩(wěn)定
第二部分：所要引用的包名，如：vue, vue-route, element-ui
第三部分：具體引用依賴的版本號或具體文件，如:@2.6.0,@2.12.0/lib/index.js 此部分為可選部分
css文件也可以使用cdn來進行引用
上述配置完成后，還需要修改build/webpack.base.conf.js文件：
'use strict'
const path = require('path')
const utils = require('./utils')
const config = require('../config')
const vueLoaderConfig = require('./vue-loader.conf')
function resolve(dir) {
return path.join(__dirname, '..', dir)
}
module.exports = {
externals:{
'vue':'Vue',
'element-ui':'ELEMENT',
'vue-router':'VueRouter',
"moment": "moment",
"md5": "js-md5"
},
context: path.resolve(__dirname, '../'),
entry: {
app: './src/main.js'
},
output: {
path: config.build.assetsRoot,
filename: '[name].js',
publicPath: process.env.NODE_ENV === 'production'
? config.build.assetsPublicPath
: config.dev.assetsPublicPath
},
如果沒有標注部分的代碼，請插入。在externals配置中，像Vue、ELEMENT、VueRouter這些都是固定寫法，webpack會根據(jù)這些字符自動查找相關依賴并引入
在修改完上述文件后，還需要修改main.js中關于這些文件的應用：
import Vue from "vue"; import App from "./App"; import router from "VueRouter"; import cookies from "vue-cookies"; import VueAxios from "vue-axios"; import axios from "axios";//elementUI無需在引用，如需使用相關代碼請使用ELEMENT代替如：const Message = ELEMENT.Message;
至此配置全部完成，需要注意的是使用CDN之后，用戶在訪問你的頁面時都會去請求所配置的CDN文件，所以選擇一個速度快且穩(wěn)定的CDN站點十分重要的；還有就是并不是所有的依賴文件都可使用此等方式引用，有些組件是不會導出對象的，也就意味著不能使用CDN來完成使用。
以上就是Vue使用CDN引用項目組件，減少項目體積的步驟的詳細內容，更多關于vue 減少項目體積的資料請關注腳本之家其它相關文章！
相關文章
這篇文章主要介紹了vue3?關于reactive的重置問題及解決，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-05-05
el-select 下拉框多選實現(xiàn)全選的實現(xiàn)
這篇文章主要介紹了el-select 下拉框多選實現(xiàn)全選的實現(xiàn)，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-08-08
overlay就是在地圖上以另外一種形式浮現(xiàn)在地圖上，常見的地圖覆蓋物為這三種類型，如：popup 彈窗、label標注信息、text文本信息等，接下來跟隨小編看下openlayers6之地圖覆蓋物overlay詳解，一起看看吧2021-09-09
Vue2.x通過Object.defineProperty()實現(xiàn)響應式系統(tǒng),但存在一些限制,如不能檢測新增和刪除的屬性、深層嵌套對象性能開銷大等,Vue3.0引入Proxy,可以更高效地攔截對象操作,解決這些問題2025-02-02
本篇文章主要介紹了在vscode中統(tǒng)一vue編碼風格的方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-02-02
vue如何動態(tài)綁定img的src屬性(v-bind)
這篇文章主要介紹了vue如何動態(tài)綁定img的src屬性(v-bind)，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04
VUE3+TS遞歸組件實現(xiàn)TreeList設計實例詳解
這篇文章主要為大家介紹了VUE3+TS遞歸組件實現(xiàn)TreeList設計實例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-09-09
vue3的頁面跳轉有兩種方式，第一種是標簽內跳轉，第二種是編程式路由導航，本文通過實例代碼給大家介紹的非常詳細，需要的朋友參考下吧2023-05-05
這篇文章主要介紹了vue源碼中的檢測方法的實現(xiàn)，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-09-09
vue 中this.$set 動態(tài)綁定數(shù)據(jù)的案例講解
這篇文章主要介紹了vue 中this.$set 動態(tài)綁定數(shù)據(jù)的案例講解，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2021-01-01