vue-cli3.0 资源加载的优化方案
20180829 更新
今天反复试了，不用区分 测试环境还是 生产环境，统一都用 cdn 就可以了
背景
之前自己搭建了一个 vue + tp5.1 的后台项目（https://segmentfault.com/a/11...），坑很多，其中一个就是资源加载的方案，由于是后台项目，之前一直没放在心上，看到一些资源优化方案后（https://juejin.im/post/5a2910...），觉得有必要弄一下。
老版本
通过：npm run build 后
可以看到， 文件大小最大的 820kb，即使用 Gzipped 压缩后也是 219kb，随着项目不断变大，这个值还会不断增大
使用CDN加速
这里请先参考 https://juejin.im/post/5a2910...，这里只做vue-cli@3.0的配置修改
- index.html文件
<!DOCTYPE html>
<html>
<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>VUE后台管理系统</title>
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
</head>
<body>
<div id="app"></div>
<!-- built files will be auto injected -->
<script src="https://unpkg.com/vue@2.5.16/dist/vue.runtime.min.js"></script>
<script src="https://unpkg.com/vuex@3.0.1/dist/vuex.min.js"></script>
<script src="https://unpkg.com/vue-router@3.0.1/dist/vue-router.min.js"></script>
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
</body>
</html>
- vue.config.js 文件
module.exports = {
baseUrl: process.env.NODE_ENV === "production" ? "./" : "/",
outputDir: process.env.outputDir,
configureWebpack: {
externals: {
vue: "Vue",
vuex: "Vuex",
"vue-router": "VueRouter",
"element-ui": "ELEMENT"
}
}
};
页面优化后
来源：https://segmentfault.com/a/1190000016178566
vue-cli3.0 资源加载的优化方案的更多相关文章
- vue cli3.0 首次加载优化
项目经理要求做首页加载优化,打包后从十几兆优化到两兆多,记下来怕下次忘记 运行report脚本 可看到都加载了那些内容,在从dist文件中index.html 查看首次加载都加载了那些东西,如下图:然 ...
- Android RecyclerView使用 及 滑动时加载图片优化方案
1.控制线程数量 + 数据分页加载2.重写onScrollStateChanged方法 这个我们后面再谈,下面先来看看RecyclerView控件的使用及我们为什么选择使用它 RecyclerView ...
- web性能优化之---JavaScript中的无阻塞加载性能优化方案
一.js阻塞特性 JS 有个很无语的阻塞特性,就是当浏览器在执行JS 代码时,不能同时做其他任何事情,无论其代码是内嵌的还是外部的. 即<script>每次出现都会让页面等待脚本的解析和执 ...
- AssetBundle使用心得【资源加载】
0.资源加载方式 静态资源 Asset下所有资源称为静态资源 Resources资源 Resources目录下,通过实例化得到的资源 AssetBundle资源 又称为增量更新资源 1.什么是Asse ...
- vue-cli3项目首页加载速度优化（cdn加速，路由懒加载，gzip压缩）
今天打算上线vue的单页面项目,上线后,首页加载速度巨慢! 原因是项目上线后,网速不够快,加载js,css等资源很慢, 打开打包好的文件发现chunk-vendors.xxxxxxx.js的包很大,达 ...
- React 16 加载性能优化指南
关于 React 应用加载的优化,其实网上类似的文章已经有太多太多了,随便一搜就是一堆,已经成为了一个老生常谈的问题. 但随着 React 16 和 Webpack 4.0 的发布,很多过去的优化手段 ...
- H5 缓存机制浅析 移动端 Web 加载性能优化
腾讯Bugly特约作者:贺辉超 1 H5 缓存机制介绍 H5,即 HTML5,是新一代的 HTML 标准,加入很多新的特性.离线存储(也可称为缓存机制)是其中一个非常重要的特性.H5 引入的离线存储, ...
- 再谈DOMContentLoaded与渲染阻塞—分析html页面事件与资源加载
浏览器的多线程中,有的线程负责加载资源,有的线程负责执行脚本,有的线程负责渲染界面,有的线程负责轮询.监听用户事件. 这些线程,根据浏览器自身特点以及web标准等等,有的会被浏览器特意的阻塞.两个很明 ...
- Cocos Creator 资源加载流程剖析【一】——cc.loader与加载管线
这系列文章会对Cocos Creator的资源加载和管理进行深入的剖析.主要包含以下内容: cc.loader与加载管线 Download部分 Load部分 额外流程(MD5 Pipe) 从编辑器到运 ...
随机推荐
- golang Linux下编译环境搭建
1.下载golang1.4和1.10源码(1.4以后的版本都用1.4go编译安装,所以先安装1.4) 2.解压后我的目录结构是: /opt/xxx/golang |-------gopath ...
- List --搜索列表
1,常见的内建函数 . if val in L : # 是否在列表 . L.index(val) # 找下标 . L.count(val) # 有多少个 . min/max(L ) # 最大最小 . ...
- [编织消息框架][netty源码分析]3 EventLoop 实现类SingleThreadEventLoop职责与实现
eventLoop是基于事件系统机制,主要技术由线程池同队列组成,是由生产/消费者模型设计,那么先搞清楚谁是生产者,消费者内容 SingleThreadEventLoop 实现 public abst ...
- spring cloud深入学习(八)-----配置中心svn示例和refresh
svn版本 同样先示例server端的代码,基本步骤一样. 1.添加依赖 <dependencies> <dependency> <groupId>org.spri ...
- MyBatis配置文件(八)－－databaseIdProvider数据库厂商标识
databaseIdProvider元素主要是为了支持不同厂商的数据库,比如有时候我们在公司内部开发使用的数据库都是PG(Postgresql),但是客户要求使用MySql,那就麻烦了是吧?其实在my ...
- 设置div背景图片填满div
可以设置div的样式为 background:url('+UPLOAD_PATH+data.url+') no-repeat; background-size: 100%;width:100%;hei ...
- react-native连接华为真机
android studio的设置:下载google USB Driver 手机部分1.找到手机开发者模式 设置->系统->关于手机->版本号(多次点击出现开发者模式) 提示你已在开 ...
- 字符串匹配算法之kmp算法
kmp算法是一种效率非常高的字符串匹配算法,是由Knuth,Morris,Pratt共同提出的模式匹配算法,所以简称KMP算法 算法思想 在一个字符串中查找另一个字符串时,会遇到如下图的情况 我们通常 ...
- Luogu P2292 [HNOI2004]L语言(Trie+dp)
P2292 [HNOI2004]L语言 题面 题目描述 标点符号的出现晚于文字的出现,所以以前的语言都是没有标点的.现在你要处理的就是一段没有标点的文章. 一段文章 \(T\) 是由若干小写字母构成. ...
- Redis源码解析：30发布和订阅
Redis的发布与订阅功能,由SUBSCRIBE,PSUBSCRIBE,UNSUBSCRIBE,PUNSUBSCRIBE,以及PUBLISH等命令实现. 通过执行SUBSCRIBE命令,客户端可以订阅 ...