Vue使用CDN引用項(xiàng)目組件，減少項(xiàng)目體積的步驟
Vue項(xiàng)目打包后有的文件動(dòng)輒幾百KB或幾M，這對一個(gè)前端項(xiàng)目的加載無疑是致命的。當(dāng)你的服務(wù)器部署在阿里云或亞馬遜，每秒只有100kb的加載速度時(shí)，頁面的載入速度絕對讓你崩潰。那么有什么辦法可以在依舊是100kb/s的加載速度下讓我們的頁面快起來呢？CDN算是其中之一的解決辦法。
首先，我們要明白為什么我的Vue項(xiàng)目在打包后產(chǎn)生的文件會(huì)那么大。我們在最開始使用Vue的時(shí)候幾乎所有組件、插件的引用都會(huì)放到項(xiàng)目主文件中進(jìn)行即 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’
項(xiàng)目在打包的時(shí)候就會(huì)去自動(dòng)查找依賴，并將依賴文件全部打入到項(xiàng)目中去，正是這些依賴的文件的存在導(dǎo)致了整個(gè)項(xiàng)目文件的體積龐大了起來。但是依賴文件又是必須的，總不可能把依賴文件刪除了不是。CDN的出現(xiàn)就為上述情況提供了一種解決方案。
CDN全稱Content Delivery Network，即內(nèi)容分發(fā)網(wǎng)絡(luò)。CDN是構(gòu)建在現(xiàn)有網(wǎng)絡(luò)基礎(chǔ)之上的智能虛擬網(wǎng)絡(luò)，依靠部署在各地的邊緣服務(wù)器，通過中心平臺的負(fù)載均衡、內(nèi)容分發(fā)、調(diào)度等功能模塊，使用戶就近獲取所需內(nèi)容，降低網(wǎng)絡(luò)擁塞，提高用戶訪問響應(yīng)速度和命中率。
Vue中使用CDN就相當(dāng)于是將原本自己項(xiàng)目所需要下載的依賴文件交由用戶的網(wǎng)絡(luò)進(jìn)行下載，Vue中僅僅保持對依賴文件的引用即可。主要需要改動(dòng)的有兩個(gè)地方一個(gè)是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 指定當(dāng)前資源下載站點(diǎn)，與之類似的還有UNPKG、cdnjs.com、BootCDN等。個(gè)人比較推薦使用jsdelivr，速度比較穩(wěn)定
第二部分：所要引用的包名，如：vue, vue-route, element-ui
第三部分：具體引用依賴的版本號或具體文件，如:@2.6.0,@2.12.0/lib/index.js 此部分為可選部分
css文件也可以使用cdn來進(jìn)行引用
上述配置完成后，還需要修改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 },
如果沒有標(biāo)注部分的代碼，請插入。在externals配置中，像Vue、ELEMENT、VueRouter這些都是固定寫法，webpack會(huì)根據(jù)這些字符自動(dòng)查找相關(guān)依賴并引入
在修改完上述文件后，還需要修改main.js中關(guān)于這些文件的應(yīng)用：
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無需在引用，如需使用相關(guān)代碼請使用ELEMENT代替如：const Message = ELEMENT.Message;
至此配置全部完成，需要注意的是使用CDN之后，用戶在訪問你的頁面時(shí)都會(huì)去請求所配置的CDN文件，所以選擇一個(gè)速度快且穩(wěn)定的CDN站點(diǎn)十分重要的；還有就是并不是所有的依賴文件都可使用此等方式引用，有些組件是不會(huì)導(dǎo)出對象的，也就意味著不能使用CDN來完成使用。
以上就是Vue使用CDN引用項(xiàng)目組件，減少項(xiàng)目體積的步驟的詳細(xì)內(nèi)容，更多關(guān)于vue 減少項(xiàng)目體積的資料請關(guān)注好吧啦網(wǎng)其它相關(guān)文章！
網(wǎng)公網(wǎng)安備