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

2023-07-13 00:28:03 76

Vue项目打包后有的文件动辄几百KB或几M，这对一个前端项目的加载无疑是致命的。当你的服务器部署在阿里云或亚马逊，每秒只有100kb的加载速度时，页面的载入速度绝对让你崩溃。那么有什么办法可以在依旧是100kb/s的加载速度下让我们的页面快起来呢？CDN算是其中之一的解决办法。

首先，我们要明白为什么我的Vue项目在打包后产生的文件会那么大。我们在最开始使用Vue的时候几乎所有组件、插件的引用都会放到项目主文件中进行即 main.js文件，我们的引用方式可能是这样的：

importVuefrom'vue'
importAppfrom'./App'
importRouterfrom'vue-router'
importElementUIfrom'element-ui'
importaxiosfrom'axios'
import'element-ui/lib/theme-chalk/index.css'
importcookiesfrom'vue-cookies'
importqsfrom'qs'
importstorefrom'./store'

项目在打包的时候就会去自动查找依赖，并将依赖文件全部打入到项目中去，正是这些依赖的文件的存在导致了整个项目文件的体积庞大了起来。但是依赖文件又是必须的，总不可能把依赖文件删除了不是。CDN的出现就为上述情况提供了一种解决方案。

CDN全称ContentDeliveryNetwork，即内容分发网络。CDN是构建在现有网络基础之上的智能虚拟网络，依靠部署在各地的边缘服务器，通过中心平台的负载均衡、内容分发、调度等功能模块，使用户就近获取所需内容，降低网络拥塞，提高用户访问响应速度和命中率。

Vue中使用CDN就相当于是将原本自己项目所需要下载的依赖文件交由用户的网络进行下载，Vue中仅仅保持对依赖文件的引用即可。主要需要改动的有两个地方一个是Vue的index.html,以及build目录下的webpack.base.conf.js，废话不多说，上代码：






Demoindexhtml

所引用的资源文件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文件：

'usestrict'
constpath=require('path')
constutils=require('./utils')
constconfig=require('../config')
constvueLoaderConfig=require('./vue-loader.conf')

functionresolve(dir){
returnpath.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中关于这些文件的应用：

importVuefrom"vue";
importAppfrom"./App";
importrouterfrom"VueRouter";
importcookiesfrom"vue-cookies";
importVueAxiosfrom"vue-axios";
importaxiosfrom"axios";//elementUI无需在引用，如需使用相关代码请使用ELEMENT代替如：constMessage=ELEMENT.Message;

至此配置全部完成，需要注意的是使用CDN之后，用户在访问你的页面时都会去请求所配置的CDN文件，所以选择一个速度快且稳定的CDN站点十分重要的；还有就是并不是所有的依赖文件都可使用此等方式引用，有些组件是不会导出对象的，也就意味着不能使用CDN来完成使用。

以上就是Vue使用CDN引用项目组件，减少项目体积的步骤的详细内容，更多关于vue减少项目体积的资料请关注毛票票其它相关文章！

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

热门推荐

随机推荐