Vue打包优化篇-CDN加速

优化原因

在没有使用cdn加速之前打包后数据如下，可以看出element-ui、vue、vuex、vue-router这些依赖都打进chunk-vendors.js中导致体积很大，假设再来很多依赖项是不是更大，同时也会影响单页面应用首屏加载速度，所以这里采用一种打包优化手段之一来分离依赖项。

查看依赖版本

首先项目中需要使用依赖项，我这里项目中打算将element-ui、vue、vuex、vue-router这些依赖项进行分离，记录依赖版本方便后面使用。

依赖名称	依赖版本
vue	2.6.11
vue-router	3.2.0
vuex	3.4.0
element-ui	2.15.9

查看依赖引用

在main.js中可以看到这些依赖被引用。
在项目中开发环境和生成环境一些配置是不同的，所以这里截图方便后面理解。

配置开发环境和生产环境

在上面我们已经看到main.js中如何引用依赖，现在我们需要做一些改动在main.js改为main-dev.js作为我们的开发环境，然后在同级目录下创建一个新的文件叫main-prod.js作为我们的生产环境，实际开发中开发环境(main-dev.js)和生产环境(main-prod.js)配置存在不同。

开发环境入口 - main-dev.js

// 这是给ElementUI组件库组件设置默认参数
Vue.use(ElementUI, { size: 'small', zIndex: 3000 });

生产环境入口 - main-prod.js

// 这是给ElementUI组件库组件设置默认参数（cdn加速和生产环境配置有区别）
Vue.prototype.$ELEMENT = {size: 'small',zIndex: 3000
};

配置开发环境入口和生产环境入口

这里需要注意一下的是配置入口，因为默认入口文件只有一个main.js但是你给改成了main-dev.js而且还新增了一个main-prod.js，然后你运行项目或打包项目肯定报错，因为它去找main.js找不到啊，所以这里需要通过vue.config.js文件来指定生产环境和开发环境入口。

vue.config.js

// 判断是否是生产环境
const isProduction = process.env.NODE_ENV !== 'development';module.exports = {publicPath: './', // 不加这个可能会导致静态资源找不到的情况。chainWebpack: config => {config.when(isProduction, config => {// 如果是生产环境，那么将main-prod.js作为入口文件(我这里是ts和js一样)。config.entry('app').clear().add('./src/main-prod.ts');});config.when(!isProduction, config => {// 如果是不是生产环境，那么将main-dev.js作为入口文件(我这里是ts和js一样).config.entry('app').clear().add('./src/main-dev.ts');});}
};

配置CDN加速

完成上面环境配置已经成功一半啦，接下来就需要配置cdn加速相关的啦。

vue.config.js

这里需要说明一下，看下面的cdn加速链接中依赖的版本和上面查看依赖版本表格展示是不是一样的？肯定要一样啊不然出现依赖版本冲突问题怎么办。
关于externals属性告诉webpack需要排除的依赖名称和挂载在window上的对象属性名称，这里简单列出常用的表，如需要其它的可以插件依赖导出到window的对象名称，也可以面向百度查找对应的对象属性名称。

依赖名称	挂载在window上的对象属性名称
vue	Vue
vue-router	VueRouter
vuex	Vuex
lodash	_
element-ui	ELEMENT


const isProduction = process.env.NODE_ENV !== 'development';const cdn = {externals: {vue: 'Vue','vue-router': 'VueRouter',vuex: 'Vuex',"element-ui": "ELEMENT"},css: ['https://cdn.bootcdn.net/ajax/libs/element-ui/2.15.9/theme-chalk/index.min.css',],js: ['https://cdn.jsdelivr.net/npm/vue@2.6.11/dist/vue.min.js','https://cdn.jsdelivr.net/npm/vue-router@3.2.0/dist/vue-router.min.js','https://cdn.jsdelivr.net/npm/vuex@3.4.0/dist/vuex.min.js','https://cdn.bootcdn.net/ajax/libs/element-ui/2.15.9/index.min.js']
};module.exports = {publicPath: './',chainWebpack: config => {config.when(isProduction, config => {config.entry('app').clear().add('./src/main-prod.ts');// 我们希望的是在生产环境下才进行cdn优化！！！这点理解很重要。// 告诉webpack需要排除的依赖名称和挂载在window上的对象属性名称。config.set('externals', cdn.externals);// 这里的作用是在后面index.html页面中通过link，script标签加载这些cdn链接。config.plugin('html').tap(args => {args[0].cdn = cdn;return args;});});config.when(!isProduction, config => {config.entry('app').clear().add('./src/main-dev.ts');});}
};

index.html

这里也需要说明一下，这个index.html页面的位置一般在public目录下。
下面的htmlWebpackPlugin.options.cdn对象是不是很眼熟，不就是我们通过vue.config.js中生产环境配置config.plugin(‘html’)加入的属性？真是一环扣一环呐。

<!DOCTYPE html>
<html lang="zh"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width,initial-scale=1.0"><link rel="icon" href="<%= BASE_URL %>favicon.ico"><title><%= htmlWebpackPlugin.options.title %></title><!-- 这里从cdn配置里面加载css文件 --><% for (var i in htmlWebpackPlugin.options.cdn && htmlWebpackPlugin.options.cdn.css) { %><link href="<%= htmlWebpackPlugin.options.cdn.css[i] %>" rel="preload" as="style" /><link href="<%= htmlWebpackPlugin.options.cdn.css[i] %>" rel="stylesheet" /><% } %><!-- 这里从cdn配置里面加载js文件 --><% for (var i in htmlWebpackPlugin.options.cdn && htmlWebpackPlugin.options.cdn.js) { %><link href="<%= htmlWebpackPlugin.options.cdn.js[i] %>" rel="preload" as="script" /><% } %></head><body><noscript><strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled.Please enable it to continue.</strong></noscript><div id="app"></div><!-- built files will be auto injected --><!-- 这里从cdn配置里面加载js文件 --><% for (var i in htmlWebpackPlugin.options.cdn && htmlWebpackPlugin.options.cdn.js) { %><script src="<%= htmlWebpackPlugin.options.cdn.js[i] %>"></script><% } %></body></html>

打包测试

完成以上步骤后，cdn打包优化就完成啦，现在运行打包测试一下。
下面打包数据和没有cdn优化的打包数据对比一下，是不是依赖项排除了？打包时间也变快了。
面试的时候是不是又多了一些底气了？

Vue打包优化篇-CDN加速相关推荐

Vue 打包优化之 externals 抽离公共的第三方库
使用 @vue/cli 脚手架构建的 Vue 全家桶项目,默认配置下,打包后会把 vue.vue-router.axios.vuex.element-ui.echarts 等公共库打包在一起,导致基础 ...
vue 打包优化，解决包大下载慢
如果你遇到vue打包后单个文件很大.网络传输严重影响了带宽.那你看这篇文章,应该是能帮到你的.本篇文章是实现文件Gz压缩实现.利用compression-webpack-plugin.具体看如下实现步 ...
网页打开慢怎么优化？CDN加速了解一下
怎么给网页加速打开网页速度慢怎么办网页打开慢怎么优化?这个时候就要使用CDN加速服务,防止网站因为加载问题导致客户流失.什么是cdn服务器,CDN加速服务器有什么优势?超级科技为你详解CDN加速. 什 ...
怎么删除已经安装的mysql_怎么样删除已经安装的mysql | wdlinux致力于Linux服务器架构,性能优化.免费CDN加速系统,免费智能DNS解析,负载均衡,集群分流...
[root@localhost ~]# rpm -qa|grep mysql php-mysql-5.1.6-27.el5 mysql-5.0.77-4.el5_5.3 perl-DBD-mysql- ...
cdn加载vue很慢_Vue.js 项目打包优化实践
首先上结果: 把常用的 Vue,router,vuex,axios 的 runtime 包拆分了出来,改为 cdn: 另外就是对于自己编写的业务代码进行分包,根据路由进行懒加载,可以较好的提高首屏加载 ...
html5怎么改为vue_Vue.js 项目打包优化实践
首先上结果: 把常用的 Vue,router,vuex,axios 的 runtime 包拆分了出来,改为 cdn: 另外就是对于自己编写的业务代码进行分包,根据路由进行懒加载,可以较好的提高首屏加载 ...
十大免费CDN加速服务排行榜-国内外免费CDN服务总结
CDN全称Content delivery network,中文内容分发网络,目的是通过在现有的Internet中增加一层新的网络架构,将网站的内容发布到最接近用户的网络"边缘", ...
【vite+vue3.2 项目性能优化实战】使用vite-plugin-cdn-import进行CDN加速优化项目体积
CDN(Content Delivery Network)即内容分发网络,是一种通过在全球范围内分布式部署服务器来加速网络内容传输的技术.CDN加速的原理是,当用户请求访问某个资源时,CDN会根据用户 ...
webpack打包vue反编译_2020年你必须知道的webpack打包优化方法
本文字数:3534字预计阅读时间:10分钟随着我们的项目项目越做越大,引入的第三方库会越来越多,打包的依赖也越来越多,每次 build 的时间越来越长,打包出来的文件会越来越大.最糟糕的是单页面应 ...
vue项目打包优化策略
vue项目打包优化策略使用vue-cli部署生产包时,发现资源包很大,打包后的vendor.js达到了1.4M,这已经很大了,而且会影响到首屏加载.那么,怎么优化呢? 1.组件按需加载这是首先可以 ...

Vue打包优化篇-CDN加速

优化原因

查看依赖版本

查看依赖引用

配置开发环境和生产环境

开发环境入口 - main-dev.js

生产环境入口 - main-prod.js

配置开发环境入口和生产环境入口

vue.config.js

配置CDN加速

vue.config.js

index.html

打包测试

Vue打包优化篇-CDN加速相关推荐

最新文章

热门文章