vue cli3 项目优化
vue-cli3 Prefetch (官网内容)
<link rel="prefetch">
是一种 resource hint,用来告诉浏览器在页面加载完成后,利用空闲时间提前获取用户未来可能会访问的内容。
默认情况下,一个 Vue CLI 应用会为所有作为 async chunk 生成的 JavaScript 文件 (通过动态 import()
按需 code splitting 的产物) 自动生成 prefetch 提示。
这些提示会被 @vue/preload-webpack-plugin 注入,并且可以通过 chainWebpack
的 config.plugin('prefetch')
进行修改和删除。
示例:
// vue.config.js
module.exports = {
chainWebpack: config => {
// 移除 prefetch 插件
config.plugins.delete('prefetch') // 或者
// 修改它的选项:
config.plugin('prefetch').tap(options => {
options[0].fileBlacklist = options[0].fileBlacklist || []
options[0].fileBlacklist.push(/myasyncRoute(.)+?\.js$/)
return options
})
}
}
当 prefetch 插件被禁用时,你可以通过 webpack 的内联注释手动选定要提前获取的代码区块:
import(/* webpackPrefetch: true */ './someAsyncComponent.vue')
webpack 的运行时会在父级区块被加载之后注入 prefetch 链接。
提示
Prefetch 链接将会消耗带宽。如果你的应用很大且有很多 async chunk,而用户主要使用的是对带宽较敏感的移动端,那么你可能需要关掉 prefetch 链接并手动选择要提前获取的代码区块。
基本优化
路由懒加载 router.js
const HomePage = () => import(/* webpackChunkName: "HomePage", webpackPrefetch: true */ 'views/homepage/index.vue')
routes: [
{
path: '*',
name: 'HomePage',
component: HomePage,
},
CDN加速
<!DOCTYPE html>
<html lang="en" style=" height: 100%;">
<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, user-scalable=0">
<title>理财商城</title>
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
<link rel="stylesheet" href="./reset.css ">
<link rel="stylesheet" href="./font/font.css "> <script type="text/javascript" src="./dprFlex.js"></script>
</head>
<body style="position: relative; width: 100%; height: 100%; overflow: hidden;background:#F1F1F2">
<div id="app"></div>
<!-- built files will be auto injected -->
<script type="text/javascript" src="//cdn.jsdelivr.net/npm/eruda"></script> <script src="https://cdn.bootcss.com/vue/2.6.10/vue.min.js"></script>
<script src="https://cdn.bootcss.com/axios/0.19.0/axios.min.js"></script>
<script src="https://cdn.bootcss.com/vuex/3.0.1/vuex.min.js"></script>
<script src="https://cdn.bootcss.com/vue-router/3.0.3/vue-router.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/moment.min.js"></script> <script> // eruda.init();
// var vConsole = new VConsole();
</script>
</body>
</html>
vue.config.js
configureWebpack: {
externals: {
'vue': 'Vue',
'vuex': 'Vuex',
'vue-router': 'VueRouter',
'Axios':'axios',
'moment': 'moment'
}
},
min.js
import Vue from 'vue'
import App from './App.vue' import router from './router/index'
import Vuex from 'vuex'
import moment from 'moment'
vue cli3 项目优化的更多相关文章
- 前端项目优化 -Web 开发常用优化方案、Vue & React 项目优化
github github-myBlob 从输入URL到页面加载完成的整个过程 首先做 DNS 查询,如果这一步做了智能 DNS 解析的话,会提供访问速度最快的 IP 地址回来 接下来是 TCP 握手 ...
- vue前端项目优化策略
vue前端项目有什么优化策略? .生成打包报告.(可以发现一些问题,并进行解决)2.使用第三方库启用CDN加载3.使用Element-ui的话,按需加载组件4.使用路由懒加载 生成打包报告: .生成打 ...
- vue cli3 项目配置
[转]https://juejin.im/post/5c63afd56fb9a049b41cf5f4 基于vue-cli3.0快速构建vue项目 本章详细介绍使用vue-cli3.0来搭建项目. 本章 ...
- vue@cli3 项目模板怎么使用public目录下的静态文件,找了好久都不对,郁闷!
作为图片最好放在static目录下,但是vue@cli3没有static,网上都说放在public目录下,行,那就放吧,可问题是图片放了怎么使用 第一次尝试 肯定用绝对路径这就不说了,用相对路径,we ...
- VUE 前端项目优化方法
前端项目通过webpack打包会生成app.js和vendor.js,如果第三方组件依赖过多,会造成打包后的vendor.js过大,页面首次加载的时候会出现白屏时间过长,影响用户体验.对此,我们需要通 ...
- vue的项目优化---回顾
陆陆续续也用vue开发或重构了不少项目,在这期间遇到不少的坑,也尝试过优化.在此记录一下,想到一点算一点吧: 一.尽可能的减少watcher的数量 当监听数据是一个对象的时候,最好具体到监听对象的 ...
- vue cli3项目发布在apache www/vue目录下并配置history路由
注意:vue项目打包后默认是指向服务器的根路径(比如apache默认www目录是根路径,当然也可以修改),这种情况不需要做路径的配置,只需要做history配置,如果不是发布到根路径而是www/vue ...
- 「Vue」vue cli3项目打包为APP方法及坑点
1.执行npm run build之后生成dist文件夹 2.打开HBuilderX新建一个APP项目 3.把dist文件夹里的所有文件拷贝替换到APP文件夹下 4.打开manifest.json文件 ...
- 让webstorm 识别vue cli3项目中的@路径别名
在setting -> languages&frameworks -> webpack里选择配置文件路径为 node_modules/@vue/cli-service/webpac ...
随机推荐
- openstack kvm cannot set up guest memory 'pc.ram': Cannot allocate memory
Kvm:启动报错:error: internal error: process exited while connecting to monitor: 2018-11-12T01:47:14.9933 ...
- 数据库中的同义词synonym
一.Oracle数据只有一个实例(简单理解就是Oracle 只能建立一个数据库,不像MySQL,它下面可以创建N个库),那么Oracle是根据用户灵活去管理的:这点读起来.理解 起来也不那么难 ...
- 性能分析 函数粒度 函数里的一条语句 汇编 反编译 机器指令 %rbx,%rbp
在Linux下做性能分析3:perf - 知乎 https://zhuanlan.zhihu.com/p/22194920 Linux Perf 性能分析工具及火焰图浅析 - 知乎 https://z ...
- hadoop 参数调优重点参数
yarn的参数调优,必调参数 28>.yarn.nodemanager.resource.memory-mb 默认为8192.每个节点可分配多少物理内存给YARN使用,考虑到节点上还 可能有其 ...
- Tosca user space 这是自己的空间,可以create module ,test case 等一大堆模块,五脏俱全
- 网关 apache APISIX
网关 apache - 国内版 Binghttps://cn.bing.com/search?q=%E7%BD%91%E5%85%B3+apache&qs=n&form=QBRE&am ...
- C++中的break、continue、goto语句
break.continue.goto break用于提前结束循环.只能打断一层循环.是把一层循环全部结束掉.continue则是提前结束循环内单次,继续循环下一步.
- typeScript模块<四>
/* 功能:定义一个操作数据库的库 支持 Mysql Mssql MongoDb 要求1:Mysql MsSql MongoDb功能一样 都有 add update delete get方法 注意:约 ...
- shell编程系列17--文本处理三剑客之awk动作中的表达式用法
shell编程系列17--文本处理三剑客之awk动作中的表达式用法 awk动作表达式中的算数运算符 awk动作中的表达式用法总结: 运算符 含义 + 加 - 减 * 乘 / 除 % 模 ^或** 乘方 ...
- 获取IFC构件的位置数据、方向数据
获取IFC构件的位置数据.方向数据 std::map<int, shared_ptr<BuildingEntity>> map_buildingEntity = b_model ...