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 资源加载的优化方案的更多相关文章

  1. vue cli3.0 首次加载优化

    项目经理要求做首页加载优化,打包后从十几兆优化到两兆多,记下来怕下次忘记 运行report脚本 可看到都加载了那些内容,在从dist文件中index.html 查看首次加载都加载了那些东西,如下图:然 ...

  2. Android RecyclerView使用 及 滑动时加载图片优化方案

    1.控制线程数量 + 数据分页加载2.重写onScrollStateChanged方法 这个我们后面再谈,下面先来看看RecyclerView控件的使用及我们为什么选择使用它 RecyclerView ...

  3. web性能优化之---JavaScript中的无阻塞加载性能优化方案

    一.js阻塞特性 JS 有个很无语的阻塞特性,就是当浏览器在执行JS 代码时,不能同时做其他任何事情,无论其代码是内嵌的还是外部的. 即<script>每次出现都会让页面等待脚本的解析和执 ...

  4. AssetBundle使用心得【资源加载】

    0.资源加载方式 静态资源 Asset下所有资源称为静态资源 Resources资源 Resources目录下,通过实例化得到的资源 AssetBundle资源 又称为增量更新资源 1.什么是Asse ...

  5. vue-cli3项目首页加载速度优化（cdn加速，路由懒加载，gzip压缩）

    今天打算上线vue的单页面项目,上线后,首页加载速度巨慢! 原因是项目上线后,网速不够快,加载js,css等资源很慢, 打开打包好的文件发现chunk-vendors.xxxxxxx.js的包很大,达 ...

  6. React 16 加载性能优化指南

    关于 React 应用加载的优化,其实网上类似的文章已经有太多太多了,随便一搜就是一堆,已经成为了一个老生常谈的问题. 但随着 React 16 和 Webpack 4.0 的发布,很多过去的优化手段 ...

  7. H5 缓存机制浅析 移动端 Web 加载性能优化

    腾讯Bugly特约作者:贺辉超 1 H5 缓存机制介绍 H5,即 HTML5,是新一代的 HTML 标准,加入很多新的特性.离线存储(也可称为缓存机制)是其中一个非常重要的特性.H5 引入的离线存储, ...

  8. 再谈DOMContentLoaded与渲染阻塞—分析html页面事件与资源加载

    浏览器的多线程中,有的线程负责加载资源,有的线程负责执行脚本,有的线程负责渲染界面,有的线程负责轮询.监听用户事件. 这些线程,根据浏览器自身特点以及web标准等等,有的会被浏览器特意的阻塞.两个很明 ...

  9. Cocos Creator 资源加载流程剖析【一】——cc.loader与加载管线

    这系列文章会对Cocos Creator的资源加载和管理进行深入的剖析.主要包含以下内容: cc.loader与加载管线 Download部分 Load部分 额外流程(MD5 Pipe) 从编辑器到运 ...

随机推荐

  1. 多线程同步锁和死锁以及synchronized与static synchronized 的区别

    线程:线程是进程中的一个执行单元,负责当前进程中程序的执行,一个进程中至少有一个线程.一个进程中是可以有多个线程的,这个应用程序也可以称之为多线程程序.简而言之:一个程序运行后至少有一个进程,一个进程 ...

  2. [Bzoj3696]化合物【暴力+树形Dp】

    Online Judge:Bzoj3696 Label:暴力,树形Dp 题目描述 首长NOI惨跪,于是去念文化课了.现在,他面对一道化学题. 这题的来源是因为在一个奇怪的学校两个化竞党在玩一个奇怪的博 ...

  3. Harvest of Apples (HDU多校第四场 B) (HDU 6333 ) 莫队 + 组合数 + 逆元

    题意大致是有n个苹果,问你最多拿走m个苹果有多少种拿法.题目非常简单,就是求C(n,0)+...+C(n,m)的组合数的和,但是询问足足有1e5个,然后n,m都是1e5的范围,直接暴力的话肯定时间炸到 ...

  4. CF集萃3

    CF1118F2 - Tree Cutting 题意:给你一棵树,每个点被染成了k种颜色之一或者没有颜色.你要切断恰k - 1条边使得不存在两个异色点在同一连通块内.求方案数. 解:对每颜色构建最小斯 ...

  5. 洛谷 P1155 双栈排序

    题面 解题思路 这道题乍一看还以为是个模拟..怒写一发30分(noip提高组t4有模拟吗?). 其实很好hack,如 10 10 2 8 1 7 9 3 4 5 6 按模拟的思路,应该是10入第一个栈 ...

  6. Java中"str1.equals(str2)"和"str1==str2"的区别

    大家好,这是我的第一篇博客,作为即将入职的学生,我现在的心情是既好奇又兴奋,对未知的职场生活充满了无限的憧憬,也想赶紧对大学生活say goodbye,因为自己的能力现在还比较有限,我想通过博客这个平 ...

  7. KOA 学习（八） koa-bodyparser

    此控件支持Josn,form,text类型 用法 var Koa = require('koa'); var bodyParser = require('koa-bodyparser'); var a ...

  8. numpy使用中的疑惑

    numpy中有一些常用的用来产生随机数的函数,randn就是其中一个,randn函数位于numpy.random中,函数原型如下: numpy.random.randn(d0, d1, ..., dn ...

  9. 字符串匹配算法之kmp算法

    kmp算法是一种效率非常高的字符串匹配算法,是由Knuth,Morris,Pratt共同提出的模式匹配算法,所以简称KMP算法 算法思想 在一个字符串中查找另一个字符串时,会遇到如下图的情况 我们通常 ...

  10. Luogu P3254 圆桌问题(最大流)

    P3254 圆桌问题 题面 题目描述 假设有来自 \(m\) 个不同单位的代表参加一次国际会议.每个单位的代表数分别为 \(r_i (i =1,2,--,m)\) . 会议餐厅共有 \(n\) 张餐桌 ...