vue-cli首页加载速度慢优化vender+vue预加载

1.修改vender文件大小

1.vender文件过大；

build文件下webpack.base.conf文件夹下modules.exports={externals:{'vue':'Vue','vue-router':'VueRouter',//必须为VueRouter 否则undefined'vuex':'Vuex','js-md5':'md5','echarts':'echarts','vant':'vant','axios':'axios'},//设置方式：https://www.tangshuang.net/3343.html
}

index.html文件引入cdk

<script src="//cdn.bootcss.com/vue/2.5.2/vue.min.js"></script>
<script src="//cdn.bootcss.com/vue-router/3.0.7/vue-router.min.js"></script>
<script src="//cdn.bootcss.com/vuex/3.1.2/vuex.min.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script crossorigin="anonymous" integrity="sha384-dvRcIlIMcjGZ3zWdA8tp/2oMLeiAKMOSLt3kZZymNo5KRK80qLQo2F+YujiP25+9" src="https://lib.baomitu.com/echarts/4.6.0/echarts.js"></script>
<linkrel="stylesheet"href="https://cdn.jsdelivr.net/npm/vant@2.6/lib/index.css"
/>
<script src="https://cdn.jsdelivr.net/npm/vant@2.6/lib/vant.min.js"></script>
<script src="http://cdn.bootcss.com/blueimp-md5/1.1.0/js/md5.js"></script>

main.js不做修改，build时会自动忽略extrinals内的依赖；

2.路由设置为懒加载

component: resolve => require(['@/pages/Login'], resolve)

3.取消生成map文件 config=>index.js

productionSourceMap: false,

4.设置超过50k的图片不使用base:64

webpack.base.conf文件{test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,loader: 'url-loader',options: {limit: 50,name: utils.assetsPath('img/[name].[hash:7].[ext]')}},

ios由于通过cdn引用依赖包；页面无法加载；考虑第二种方式：

2. vue预加载

下载插件 npm install prerender-spa-plugin --save-dev
build 下 webpack.pro.conf文件夹

//webpack.pro.conf.js
plugins: [// --添加--new PrerenderSPAPlugin({staticDir:config.build.assetsRoot,// outputDir:path.join(config.build.assetsRoot,'base')routes:['/','/login','/homepage'],//路由改为historyrenderer:new Renderer({inject:{foo:'bar'},headless:false,renderAfterDocumentEvent:'render-event'//dispatch时间，要与main.js文件名统一})}),
]//router.js
export default new Router({mode:'history',//改为historyroutes: [{}]
})//main.jsnew Vue({el: '#app',router,store,components: {App},template: '<App/>',mounted(){document.dispatchEvent(new Event('render-event'))}
})

如不够详细请查看：https://tech.meituan.com/2018/11/15/first-contentful-paint-practice.html

如果还未解决问题可考虑将单页面打包为多页面，本人未试

单页面改造为多页面参考：https://www.cnblogs.com/webhmy/p/10009364.html

vue按需加载：https://www.cnblogs.com/xujianwu/p/11429737.html

谢谢提意见及点赞。哈哈哈
有问题加qq:1215323732

vue-cli首页加载速度慢优化vender+vue预加载相关推荐

小程序性能优化之页面预加载方案——让你的小程序运行如飞进阶篇
小程序性能优化之页面预加载方案进阶篇转载请注明出处:https://blog.csdn.net/sinat_27612147/article/details/80798452 写在前面预加载方案 ...
小程序性能优化之页面预加载方案——让你的小程序运行如飞集成篇
小程序性能优化之页面预加载方案集成篇转载请注明出处:https://blog.csdn.net/sinat_27612147/article/details/80802725 前言之前看到一篇文 ...
html页面预加载图片不出来,页面图片预加载与懒加载策略
在图片的加载策略之前,我们先来了解下html网页中,图片的不同位置的图片分别是在什么时候发起图片资源请求的 img 标签 img标签会在html渲染解析到的时候,如果解析到img src值,则浏览器会 ...
[Vue-cli3] is a Vue CLI 3 only command and you are using Vue CLI 2.9.6. You may...
项目场景: Vue-cli3执行生成脚手架,这个bug已解决; 问题描述: vue-cli3安装完成,执行初始化vue create xxx,提示: is a Vue CLI 3 only comma ...
FragmentPagerAdapter加载fragment并使用setUserVisibleHint()处理预加载时遇到的坑,给textview赋值时出现的空指针异常...
FragmentPagerAdapter加载fragment并使用setUserVisibleHint()处理预加载时,给textview赋值时出现的空指针异常 public class BaseFr ...
vue create is a Vue CLI 3 only command and you are using Vue CLI 2.9.6. You may want to run the
提示:vue create is a Vue CLI 3 only command and you are using Vue CLI 2.9.6. You may want to run the f ...
vue create is a Vue CLI 3 only command and you are using Vue CLI 2.9.6. You
之前自己安装的vue版本是2.9.6的但是最近项目需要,cli的命令vue create无法使用,报错 vue create is a Vue CLI 3 only command and you a ...
vue create is a Vue CLI 3 only command and you are using Vue CLI 2.9.6. You may want to run the f
vue create is a Vue CLI 3 only command and you are using Vue CLI 2.9.6. You may want to run the fo ...
HTML5 API详解（7）:link prefetch提升加载速度，优化体验
链接预取:浏览器会自动在后台把你需要加载的页面下载下来,当用户要点击进入该页面的时候,浏览器会从缓存把这个页面取出来,页面的加载速度就会加快. 标签属性:rel='next' 页面预加载很简单,只需要 ...
如何利用 webp 进行小程序图片加载速度的优化
导语最近很长一段时间没有更新博客,一方面是自己最近参与了小程序的开发,另一方面也是自己略有些怠惰,给自己记个过~那么现在既然回到学校那么还是要分享一些知识的. 前一阵子参与微信小程序开发时遇到了一个 ...

vue-cli首页加载速度慢优化vender+vue预加载

vue-cli首页加载速度慢优化vender+vue预加载相关推荐

最新文章

热门文章