Vue使用CDN引用项目组件,减少项目体积的步骤


Posted in Javascript onOctober 30, 2020

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" href="https://cdn.jsdelivr.net/npm/element-ui@2.12.0/lib/theme-chalk/index.css" 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 减少项目体积的资料请关注三水点靠木其它相关文章!

Javascript 相关文章推荐
利用WebBrowser彻底解决Web打印问题(包括后台打印)
Jun 22 Javascript
javascript 遍历验证所有文本框的值
Aug 27 Javascript
使用js写的一个简易的投票
Nov 27 Javascript
js 获取浏览器版本以此来调整CSS的样式
Jun 03 Javascript
Perl Substr()函数及函数的应用
Dec 16 Javascript
详解AngularJS中自定义过滤器
Dec 28 Javascript
Highcharts学习之数据列
Aug 03 Javascript
json定义及jquery操作json的方法
Oct 03 Javascript
浅谈jQuery中事情的动态绑定
Feb 12 Javascript
判断横屏竖屏(三种)
Feb 13 Javascript
前端开发不得不知的10个最佳ES6特性
Aug 30 Javascript
用js实现每隔一秒刷新时间的实例(含年月日时分秒)
Oct 25 Javascript
vue+swiper实现左右滑动的测试题功能
Oct 30 #Javascript
利用vue3+ts实现管理后台(增删改查)
Oct 30 #Javascript
vue项目页面嵌入代码块vue-prism-editor的实现
Oct 30 #Javascript
解决vue侦听器watch,调用this时出现undefined的问题
Oct 30 #Javascript
vue2.0 watch里面的 deep和immediate用法说明
Oct 30 #Javascript
JavaScript实现轮播图效果
Oct 30 #Javascript
vue组件添加事件@click.native操作
Oct 30 #Javascript
You might like
php删除数组元素示例分享
2014/02/17 PHP
PHP中Closure类的使用方法及详解
2015/10/09 PHP
yii2使用GridView实现数据全选及批量删除按钮示例
2017/03/01 PHP
TP5框架实现自定义分页样式的方法示例
2020/04/05 PHP
一个javascript参数的小问题
2008/03/02 Javascript
AngularJS使用ng-repeat指令实现下拉框
2016/08/23 Javascript
jQuery实现的购物车物品数量加减功能代码
2016/11/16 Javascript
微信小程序 石头剪刀布实例代码
2017/01/04 Javascript
JS完成画圆圈的小球
2017/03/07 Javascript
详解Vue爬坑之vuex初识
2017/06/14 Javascript
vue实现点击关注后及时更新列表功能
2018/06/26 Javascript
Vue组件中的data必须是一个function的原因浅析
2018/09/03 Javascript
vue组件中的样式属性scoped实例详解
2018/10/30 Javascript
Vue源码解析之Template转化为AST的实现方法
2018/12/14 Javascript
jquery获取file表单选择文件的路径、名字、大小、类型
2019/01/18 jQuery
[05:16]《大圣!大圣》——DOTA2新英雄齐天大圣配音李世宏老师专访
2016/12/13 DOTA
跟老齐学Python之重回函数
2014/10/10 Python
用Python脚本来删除指定容量以上的文件的教程
2015/05/04 Python
Python的Django框架中使用SQLAlchemy操作数据库的教程
2016/06/02 Python
Django 迁移、操作数据库的方法
2019/08/02 Python
Python爬虫:url中带字典列表参数的编码转换方法
2019/08/21 Python
python 图像的离散傅立叶变换实例
2020/01/02 Python
css3 border旋转时的动画应用
2016/01/22 HTML / CSS
使用css实现android系统的loading加载动画
2019/07/25 HTML / CSS
HTML块级标签汇总(小篇)
2016/07/13 HTML / CSS
一套比较完整的软件测试人员面试题
2012/05/13 面试题
个人求职简历的自我评价
2013/10/19 职场文书
打架检讨书800字
2014/01/10 职场文书
2014年教师节红领巾广播稿
2014/09/10 职场文书
2014房屋登记授权委托书
2014/10/13 职场文书
2014年教研工作总结
2014/12/06 职场文书
党支部培养考察意见
2015/06/02 职场文书
导游词之南昌滕王阁
2019/11/29 职场文书
Java Optional<Foo>转换成List<Bar>的实例方法
2021/06/20 Java/Android
详解jQuery的核心函数和事件处理
2022/02/18 jQuery
讨论nginx location 顺序问题
2022/05/30 Servers