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 ...
随机推荐
- Java-Maven(九):Maven 项目pom文件引入工程根目录下lib文件夹下的jar包
由于项目一些特殊需求,pom依赖的包可能是非Maven Repository下的包文件,因此无法自己从网上下载.此时,我们团队git上对该jar使用. Maven项目pom引入lib下jar包 在ec ...
- Laravel--文件管理及上传自定义目录及文件名
laravel 上传 php 需要开启 fileinfo 扩展 先看一个例子: $file = $request->file('shopimg'); $path = $file->stor ...
- Tensorflow 2 模型默认保存路径
Tensorflow 2 模型默认保存路径 商务合作,科技咨询,版权转让:向日葵,135-4855__4328,xiexiaokui#qq.com 保存: import datetime now=da ...
- Android 调用.Net WCF服务 .
本来以为在java平台上用axis2生成了客户端代理类然后移植到Android平台上就好了.没想到在移植过程中出现了很多问题.说明JVM和android的DVM差距还是很大的. JVM执行的是clas ...
- Flutter -------- dio网络请求
dio是Flutter中文网开源的一个强大的Dart Http请求库,支持Restful API.FormData.拦截器.请求取消.Cookie管理.文件上传/下载.超时等... 1.添加依赖# d ...
- Python3基础 keyword 查看所有的关键字
Python : 3.7.3 OS : Ubuntu 18.04.2 LTS IDE : pycharm-community-2019.1.3 ...
- SVL-VI SLAM
3.4. Mappoints management and key frame process如果在步骤3.3中成功跟踪地图点,则缓存地图点以在下一帧中优先化.当完成当前帧的跟踪时,应该为下一帧更新帧 ...
- js 实现复制粘贴
js 实现复制粘贴 <!DOCTYPE html> <html><head> <meta http-equiv="Content-Type" ...
- ABAP函数篇1 日期函数
1. 日期格式字段检查 data:l_date type ekko-bedat. l_date = '20080901'. CALL FUNCTION 'DATE_CHECK_PLAUSIBILITY ...
- Text Prompted Remote Speaker Authentication : Joint Speech and Speaker Recognition/Verification System :: Major Project ::: Introduction
转载自:http://ganeshtiwaridotcomdotnp.blogspot.com/2010/12/text-prompted-remote-speaker.html Biometrics ...