我们的项目随着组件的加入，首次加载的js文件越来越大，用户等待时间越来越长；之前想着使用webpack的splitCoding来解决，看了webpack的官方文档可以配置optimization的

moduleIds这个属性来将node_modules中的公用的库的代码提取出来，如果代码没有变化，那么就不会改变文件的hash值，但是我用的是vue的nuxt框架，设置这个属性后每次build还是会生成新的hash值，每次用户都还是会下载新的文件，而我们的项目又会经常部署，显然这个方案不行；
 
最后我只能加一些比较大的库像threejs，phaser，videojs等直接加载.min.js文件，加载完后在执行相关的代码，

还有一些则是采用js的动态加载方案

，最后将项目的代码的首次加载时间控制在1-2秒左右，体验效果好了很多！！

vue加载优化方案的更多相关文章

  1. vue加载优化策略

    vue.js是一个比较流行的前端框架,与react.js.angular.js相比来说,vue.js入手曲线更加流畅,不管掌握多少都可以快速上手.但是单页面应用也都有其弊病,有时候首屏加载慢的让人捏舌 ...

  2. 关于cocos2dx for lua资源加载优化方案

    之前我写游戏加载都是从一个json文件写入要加载的文件名来实现加载,但是如果资源 比较多的情况下,会导致非常难管理,需要逐个写入.所以换了另外一种方式来加载文件. 首先,我是通过场景之前的切换时候,加 ...

  3. LinuxDLL加载优化方案

    作者:zhanhailiang 日期:2014-10-26 linux程序动态库载入流程简单介绍 linux从程序(program或对象)变成进程(process或进程),简单说来须要经过三步: fo ...

  4. vue项目首屏加载优化实战

    问题 单页面应用的一个问题就是首页加载东西过多,加载时间过长.特别在移动端,单页面应用的首屏加载优化更是绕不开的话题.下面我会写出我在项目中做的一些优化,希望大家能够相互讨论,共同进步. 我的项目vu ...

  5. Vue SPA 首屏加载优化实践

    写在前面 本文记录笔者在Vue SPA项目首屏加载优化过程中遇到的一些坑及优化方案! 我们以 vue-cli 工具为例,使用 vue-router 搭建SPA应用,UI框架选用 element-ui ...

  6. Vue 网站首页加载优化

    Vue 网站首页加载优化 本篇主要讲解 Vue项目打包后 vendor.js 文件很大 如何对它进行优化 以及开启Vue的压缩 和 nginx gzip 压缩的使用, 其他就是对接口优化等  1. v ...

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

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

  8. vuejs学习之 项目打包之后的首屏加载优化

    vuejs学习之 项目打包之后的首屏加载优化 一:使用CDN资源 我们在打包时,会将package.json里,dependencies对象里插件打包起来,我们可以将其中的一些使用cdn的方式加载,例 ...

  9. js资源加载优化

    互联网应用或者访问量大的应用,对js的加载优化是不可少的.下面记录几种优化方法 CDN  + 浏览器缓存 CDN(content delivery network)内容分发网络, 最传统的优化方式.其 ...

随机推荐

  1. sublime text 3 3126注册码

    —– BEGIN LICENSE —– Michael Barnes Single User License EA7E-821385 8A353C41 872A0D5C DF9B2950 AFF6F6 ...

  2. MySQL 使用连接池封装pymysql

    备注:1,记得先修改连接的数据库哦,(用navicat更方便一点):2,分开两个py文件写入,运行sqlhelper.py文件 一.在utils.py中写 import pymysqlfrom DBU ...

  3. WSDL的学习

    1.WSDL是什么? 2.wsdl说明书结构 拿到说明书,从下往上看, 图2-1 port:为端点 binding:绑定 图2-2 type属性----->找到portType标签 operat ...

  4. Visual Studio Code：中文乱码

    造冰箱的大熊猫@cnblogs 2019/11/3 在UTF环境下,用VSCode打开一个GB2312编码的文件,显示乱码怎么办? 1.窗口右下方会显示当前所使用的编码格式(下图中手型图标所在处UTF ...

  5. Gradle 如何打包 Spring Boot 如何不添加版本代码

    在 Gradle 中如何在打包的 Jar 中不包含版本代码? 在 bootJar 中,使用下面的代码进行打包不包含版本代码. archiveFileName = "${archiveBase ...

  6. [USACO15DEC] 最大流Max Flow && Tarjan 线性 LCA 教学？

    题面 显然是树上差分模板题啦,不知道树上差分的童鞋可以去百度一下,很简单. 然后顺带学了一下 tarjan 的 O(N+Q) 离线求LCA的算法 (准确的说难道不应该带个并查集的复杂度吗???) 算法 ...

  7. luogu P4859 已经没有什么好害怕的了

    嘟嘟嘟 题中给的\(k\)有点别扭,我们转换成\(a > b\)的对数是多少,这个用二元一次方程解出来是\(\frac{n + k}{2}\). 然后考虑dp,令\(dp[i][j]\)表示前\ ...

  8. jacky解读麻省理工《计算机科学与Python编程导论》第1集

    文:@数据分析-jacky(朱元禄) (一)导言 本课程讲的中心思想就是五个字:计算机思维 Python只是辅助工具,是辅助大家理解计算机思维,仅此而已 急功近利是人性,适得其反是结果:我们看到有很多 ...

  9. intle官方手册下载

    如题:https://software.intel.com/en-us/articles/intel-sdm#three-volume 方便哪些不会怎么搜索的同学吧. 链接: https://pan. ...

  10. java并发编程--第一章并发编程的挑战

    一.java并发编程的挑战 并发编程需要注意的问题: 并发编程的目的是让程序运行的更快,然而并不是启动更多的线程就能让程序最大限度的并发执行.若希望通过多线程并发让程序执行的更快,会受到如下问题的挑战 ...