电脑知识|欧美黑人一区二区三区|软件|欧美黑人一级爽快片淫片高清|系统|欧美黑人狂野猛交老妇|数据库|服务器|编程开发|网络运营|知识问答|技术教程文章 - 好吧啦网

您的位置:首頁技術文章
文章詳情頁

Vue使用CDN引用項目組件,減少項目體積的步驟

瀏覽:2日期:2022-11-08 10:53:45

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

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

Vue中使用CDN就相當于是將原本自己項目所需要下載的依賴文件交由用戶的網絡進行下載,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,速度比較穩定

第二部分:所要引用的包名,如: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會根據這些字符自動查找相關依賴并引入

在修改完上述文件后,還需要修改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來完成使用。

以上就是Vue使用CDN引用項目組件,減少項目體積的步驟的詳細內容,更多關于vue 減少項目體積的資料請關注好吧啦網其它相關文章!

標簽: Vue
主站蜘蛛池模板: 胜为光纤光缆_光纤跳线_单模尾纤_光纤收发器_ODF光纤配线架厂家直销_北京睿创胜为科技有限公司 - 北京睿创胜为科技有限公司 | 范秘书_懂你的范文小秘书| 京港视通报道-质量走进大江南北-京港视通传媒[北京]有限公司 | 仓储货架_南京货架_钢制托盘_仓储笼_隔离网_环球零件盒_诺力液压车_货架-南京一品仓储设备制造公司 | 选矿设备,选矿生产线,选矿工艺,选矿技术-昆明昆重矿山机械 | 颚式破碎机,圆锥破碎机,制砂机-新乡市德诚机电制造有限公司 | 蒸压釜_蒸养釜_蒸压釜厂家-山东鑫泰鑫智能装备有限公司 | 网站建设-高端品牌网站设计制作一站式定制_杭州APP/微信小程序开发运营-鼎易科技 | 在线悬浮物浓度计-多参数水质在线检测仪-上海沃懋仪表科技有限公司 | 【甲方装饰】合肥工装公司-合肥装修设计公司,专业从事安徽办公室、店面、售楼部、餐饮店、厂房装修设计服务 | 加中寰球移民官网-美国移民公司,移民机构,移民中介,移民咨询,投资移民 | 【铜排折弯机,钢丝折弯成型机,汽车发泡钢丝折弯机,线材折弯机厂家,线材成型机,铁线折弯机】贝朗折弯机厂家_东莞市贝朗自动化设备有限公司 | 注塑_注塑加工_注塑模具_塑胶模具_注塑加工厂家_深圳环科 | 高扬程排污泵_隔膜泵_磁力泵_节能自吸离心水泵厂家-【上海博洋】 | 常州律师事务所_常州律所_常州律师-江苏乐天律师事务所 | 涂层测厚仪_漆膜仪_光学透过率仪_十大创新厂家-果欧电子科技公司 | 蜂窝块状沸石分子筛-吸附脱硫分子筛-萍乡市捷龙环保科技有限公司 | 嘉兴恒升声级计-湖南衡仪声级计-杭州爱华多功能声级计-上海邦沃仪器设备有限公司 | 分轨 | 上传文件,即刻分离人声和伴奏 | 东莞精密模具加工,精密连接器模具零件,自動機零件,冶工具加工-益久精密 | 单螺旋速冻机-双螺旋-流态化-隧道式-食品速冻机厂家-广州冰泉制冷 | 加气混凝土砌块设备,轻质砖设备,蒸养砖设备,新型墙体设备-河南省杜甫机械制造有限公司 | 集菌仪_智能集菌仪_全封闭集菌仪_无菌检查集菌仪厂家-那艾 | 有声小说,听书,听小说资源库-听世界网 | 全自动端子机|刺破式端子压接机|全自动双头沾锡机|全自动插胶壳端子机-东莞市傅氏兄弟机械设备有限公司 | 动物麻醉机-数显脑立体定位仪-北京易则佳科技有限公司 | 重庆钣金加工厂家首页-专业定做监控电视墙_操作台 | 山东氧化铁红,山东铁红-淄博科瑞化工有限公司 | 耐高温电缆厂家-远洋高温电缆 | 淬火设备-钎焊机-熔炼炉-中频炉-锻造炉-感应加热电源-退火机-热处理设备-优造节能 | 电销卡_北京电销卡_包月电话卡-豪付网络 | 定做大型恒温循环水浴槽-工业用不锈钢恒温水箱-大容量低温恒温水槽-常州精达仪器 | 深圳高新投三江工业消防解决方案提供厂家_服务商_园区智慧消防_储能消防解决方案服务商_高新投三江 | 编织人生 - 权威手工编织网站,编织爱好者学习毛衣编织的门户网站,织毛衣就上编织人生网-编织人生 | 湖南专升本-湖南省专升本报名-湖南统招专升本考试网 | 热缩管切管机-超声波切带机-织带切带机-无纺布切布机-深圳市宸兴业科技有限公司 | 金属波纹补偿器厂家_不锈钢膨胀节价格_非金属伸缩节定制-庆达补偿器 | 氨水-液氨-工业氨水-氨水生产厂家-辽宁顺程化工 | 贴板式电磁阀-不锈钢-气动上展式放料阀-上海弗雷西阀门有限公司 工业机械三维动画制作 环保设备原理三维演示动画 自动化装配产线三维动画制作公司-南京燃动数字 | 模型公司_模型制作_沙盘模型报价-中国模型网 | 东莞ERP软件_广州云ERP_中山ERP_台湾工厂erp系统-广东顺景软件科技有限公司 |