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 相关文章推荐
jquery 元素相对定位代码
Oct 15 Javascript
javascript使用eval或者new Function进行语法检查
Oct 16 Javascript
js中function()使用方法
Dec 24 Javascript
浅谈angular.js中实现双向绑定的方法$watch $digest $apply
Oct 14 Javascript
ionic js 模型 $ionicModal 可以遮住用户主界面的内容框
Jun 06 Javascript
Base64(二进制)图片编码解析及在各种浏览器的兼容性处理
Feb 09 Javascript
JavaScript引用类型之基本包装类型实例分析【Boolean、Number和String】
Aug 09 Javascript
jQuery 点击获取验证码按钮及倒计时功能
Sep 20 jQuery
PWA介绍及快速上手搭建一个PWA应用的方法
Jan 27 Javascript
深入解析Vue源码实例挂载与编译流程实现思路详解
May 05 Javascript
JS数组属性去重并校验重复数据
Jan 10 Javascript
JS表格的动态操作完整示例
Jan 13 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
apache+mysql+php+ssl服务器之完全安装攻略
2006/09/05 PHP
PHP5中MVC结构学习
2006/10/09 PHP
PHP查询快递信息的方法
2015/03/07 PHP
php实现留言板功能
2017/03/05 PHP
laradock环境docker-compose操作详解
2019/07/29 PHP
php多进程并发编程防止出现僵尸进程的方法分析
2020/02/28 PHP
splice slice区别
2006/10/09 Javascript
一个高效的JavaScript压缩工具下载集合
2007/03/06 Javascript
用JavaScript事件串连执行多个处理过程的方法
2007/03/09 Javascript
jquery实现弹出层完美居中效果
2014/03/03 Javascript
IE6已终止操作问题的2种情况及解决
2014/04/23 Javascript
基于javascript的JSON格式页面展示美化方法
2014/07/02 Javascript
jQuery插件实现带圆点的焦点图片轮播切换
2016/01/18 Javascript
前端框架Vue.js构建大型应用浅析
2016/09/12 Javascript
基于chosen插件实现人员选择树搜索自动筛选功能
2016/09/24 Javascript
jQuery实现模糊搜索功能的方法分析
2018/06/29 jQuery
Js on及addEventListener原理用法区别解析
2020/07/11 Javascript
Python Requests安装与简单运用
2016/04/07 Python
python常用知识梳理(必看篇)
2017/03/23 Python
关于初始种子自动选取的区域生长实例(python+opencv)
2020/01/16 Python
如何利用Python识别图片中的文字
2020/05/31 Python
关于Python3爬虫利器Appium的安装步骤
2020/07/29 Python
Python 在局部变量域中执行代码
2020/08/07 Python
Python 中的函数装饰器和闭包详解
2021/02/06 Python
KELLER SPORTS荷兰:在线订购最好的运动产品
2020/10/13 全球购物
会计电算化专业个人的自我评价
2013/11/24 职场文书
学生手册家长评语
2014/02/10 职场文书
文体活动实施方案
2014/03/27 职场文书
社团活动总结模板
2014/06/30 职场文书
2014年预备党员端正入党动机思想汇报
2014/09/13 职场文书
离婚协议书该怎么写
2014/10/04 职场文书
未婚证明书模板
2014/10/08 职场文书
小学生五一劳动节演讲稿
2015/03/18 职场文书
2015年国庆节活动总结
2015/03/23 职场文书
社区低保工作总结2015
2015/07/23 职场文书
Python实现学生管理系统并生成exe可执行文件详解流程
2022/01/22 Python