Vue使用CDN引用項目組件，減小項目體積

時間 2020-07-25

原文原文鏈接

　　Vue項目打包後有的文件動輒幾百KB或幾M，這對一個前端項目的加載無疑是致命的。當你的服務器部署在阿里雲或亞馬遜，每秒只有100kb的加載速度時，頁面的載入速度絕對讓你崩潰。那麼有什麼辦法能夠在依舊是100kb/s的加載速度下讓咱們的頁面快起來呢？CDN算是其中之一的解決辦法。css

　　首先，咱們要明白爲何個人Vue項目在打包後產生的文件會那麼大。咱們在最開始使用Vue的時候幾乎全部組件、插件的引用都會放到項目主文件中進行即 main.js文件，咱們的引用方式多是這樣的：html

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的出現就爲上述狀況提供了一種解決方案。前端

　　CDN全稱Content Delivery Network，即內容分發網絡。CDN是構建在現有網絡基礎之上的智能虛擬網絡，依靠部署在各地的邊緣服務器，經過中心平臺的負載均衡、內容分發、調度等功能模塊，使用戶就近獲取所需內容，下降網絡擁塞，提升用戶訪問響應速度和命中率。vue

　　Vue中使用CDN就至關因而將本來本身項目所須要下載的依賴文件交由用戶的網絡進行下載，Vue中僅僅保持對依賴文件的引用便可。主要須要改動的有兩個地方一個是Vue的index.html,以及build目錄下的webpack.base.conf.js，廢話很少說，上代碼：webpack

<!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" href="https://cdn.jsdelivr.net/npm/element-ui@2.12.0/lib/theme-chalk/index.css">
</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分爲幾部分：ios

　　第一部分：https://cdn.jsdelivr.net/npm 指定當前資源下載站點，與之相似的還有UNPKG、cdnjs.com、BootCDN等。我的比較推薦使用jsdelivr，速度比較穩定web

　　第二部分：所要引用的包名，如：vue, vue-route, element-uivue-router

　　第三部分：具體引用依賴的版本號或具體文件，如:@2.6.0,@2.12.0/lib/index.js 此部分爲可選部分 npm

　　css文件也可使用cdn來進行引用element-ui

　　上述配置完成後，還須要修改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會根據這些字符自動查找相關依賴並引入

　　在修改完上述文件後，還須要修改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文件，因此選擇一個速度快且穩定的CDN站點十分重要的；還有就是並非全部的依賴文件均可使用此等方式引用，有些組件是不會導出對象的，也就意味着不能使用CDN來完成使用。