我们的项目随着组件的加入，首次加载的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. DisplayModeProvider完成移动开发自动视图解析

    MVC中新建视图命名:XXX.cshtml.XXX.mobile.cshtml:用手机访问会自动到xxx.mobile.cshtml 一.原理 MVC中是通过DisplayModeProvider实现 ...

  2. php MySQL 查询数据

    以下为在MySQL数据库中查询数据通用的 SELECT 语法: SELECT column_name,column_name FROM table_name [WHERE Clause] [LIMIT ...

  3. Comet OJ - Contest #3 (A 比赛 加强版）二分答案

    考试的时候同届神犇 JZYshurak 出了一个  n=$10^5$ 的数据加强版. 刚开始没什么思路,但是忽然想到这个可以转成二分判定+暴力枚举的模型. 二分 ans, 使得大于等于 ans 的值小 ...

  4. error while loading shared libraries: libmysqlclient.so.20 问题小结

    问题:安装完成sysbench之后,查看sysbench版本号时出现下面问题.这种报错很常见, [root@zero01 sysbench]# /usr/local/sysbench/bin/sysb ...

  5. 7月清北学堂培训 Day 3

    今天是丁明朔老师的讲授~ 数据结构 绪论 下面是天天见的: 栈,队列: 堆: 并查集: 树状数组: 线段树: 平衡树: 下面是不常见的: 主席树: 树链剖分: 树套树: 下面是清北学堂课程表里的: S ...

  6. HTTPie 工具使用入门

    HTTPie 是一个 HTTP 的命令行客户端,目标是让 CLI 和 web 服务之间的交互尽可能的人性化.这个工具提供了简洁的 http 命令,允许通过自然的语法发送任意 HTTP 请求数据,展示色 ...

  7. CF1197B

    CF1197B 题意: 出n个柱子,每个柱子一个圆盘,其半径各不相同,每次只能将柱子上只有一个圆盘的移到相邻位置,问能否全部移到一个柱子上. 解法: 思路题. 如果所有盘子都能移动到同一个柱子上,那么 ...

  8. PHP 之快递100接口封装

    <?php /** * Created by PhpStorm. * User: Yang * Date: 2019/8/23 * Time: 10:38 */ class Kuaidi_Que ...

  9. vim 永久显示行号 & 临时显示行号

    在linux环境下,vim是常用的代码查看和编辑工具.在程序编译出错时,一般会提示出错的行号,但是用vim打开的代码确不显示行号,错误语句的定位非常不便.那么怎样才能让vim显示代码的行号呢? 1 临 ...

  10. Linux设备驱动程序 之 工作队列

    工作队列可以把工作推后,交给一个内核线程去执行–这个下半部分总是会在进程上下文中执行:通过工作队列执行的代码占尽进程上下文的优势:最重要的是工作队列允许重新调度甚至睡眠: 在工作队列和软中断/task ...