我们的项目随着组件的加入，首次加载的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. SIGAI深度学习第四集 深度学习简介

    讲授机器学习面临的挑战.人工特征的局限性.为什么选择神经网络.深度学习的诞生和发展.典型的网络结构.深度学习在机器视觉.语音识别.自然语言处理.推荐系统中的应用 大纲: 机器学习面临的挑战 特征工程的 ...

  2. ckeditor粘贴word图片自动上传功能

    由于工作需要必须将word文档内容粘贴到编辑器中使用 但发现word中的图片粘贴后变成了file:///xxxx.jpg这种内容,如果上传到服务器后其他人也访问不了,网上找了很多编辑器发现没有一个能直 ...

  3. CF 940F - Machine Learning （ 带 修 )

    题目: 链接:https://codeforces.com/problemset/problem/940/F 题意:给你n个数,a[i]有q个操作,操作有两种:操作1.       1 x y 表示询 ...

  4. 5分钟记住列表的使用功能－Python基础前传（7）

    学习任何一门技术,最重要的是逻辑而不是内容,仅会内容,我们仅仅是技术的使用者,但如果我们懂得了技术背后的逻辑,我们就是技术的创造者,所以同样领域的工作,有人月入5千,有人月入5万,就是这个差别: 学技 ...

  5. Tecplot中如何计算Ma数（马赫数）【转载】

    转载自:http://blog.163.com/wanglei2146073@126/blog/static/90689607201282555055144/ fluent是我们常用的CFD软件,但由 ...

  6. Elasticsearch的Search详解

    介绍 ES不是新技术,是将全文检索和数据分析.分布式整合到一起. 基于lucene开发,提供简单的restful api接口.java api接口.其他语言开发接口等. 实现了分布式的搜索引擎和分析引 ...

  7. 第11组 Alpha事后诸葛亮

    第11组 Alpha事后诸葛亮   组长博客链接 https://www.cnblogs.com/xxylac/p/11924846.html 设想和目标 我们的软件要解决什么问题?是否定义得很清楚? ...

  8. TNetHttpClient的用法

    TNetHttpClient的用法 TNetHttpClient是DELPHI XE8新增加的控件. 在之前,我们一般都是使用IDHTTP控件,但在安卓.IOS等非WINDOWS平台,IDHTTP访问 ...

  9. python3 django项目从项目中导出依赖包

    1. 在项目的根目录中使用mac终端执行命令, pip3 freeze > requirements.txt #requirements.txt只是个名字可以随便起,一般默认为requireme ...

  10. java批量修改指定目录下的文件名

    package io; import java.io.File; import java.io.IOException; /** * @Auther: Code * @Date: 2018/9/9 1 ...