1、启用gz 配置: 服务器开启gzip

会生成 gz 文件,现代浏览器基本都支持,会读取gz文件,。
开启配置:https://blog.csdn.net/baidu_35407267/article/details/77141871

2、解决依赖项的大小

npm run build --report 查看依赖内容,分析、优化

a、moment 过大,使用 date-fns代替
npm install date-fns --save
https://blog.csdn.net/fsxxzq521/article/details/85715213
b、vue核心包 使用运行时版本,vue.runtime.esm.js。节约 将近100k。
限制在于 只能用render来 运行时 生成,不能使用template 。开发不便。
https://cn.vuejs.org/v2/guide/installation.html#
c、zyby-ui组件,过大,有这样一个问题:一些组件依赖了vue,

?为什么mintui 导入了 但是没有加载vue呢。
答:打包时 使用了externals 配置选项
externals 名叫外部扩展,里面定义的东西 如果跟 import 的 from 同名时 打包时 不会打进去,而是在运行时 再去外部获取。
注意: externals 里的键名 跟 import from 的内容相同,而键名对应的值 为 真实 外部变量。externals相对于一个中转的作用,打包时 告诉webpack,遇到 from 内容 和 externals 键名相同时,是运行时从外部获取。
另,如mintui 的配置,如果 用到了按需加载,记得配置时 应按照 babel 转换后的语法去操作。

正确解决:去掉vue,mintui 用到的组件,互相依赖的自制组件,dependencies
externals: {
    vue: {
      root: 'Vue',
      commonjs: 'vue',
      commonjs2: 'vue',
      amd: 'vue'
    }
  },
小插曲:直接写出 vue: 'Vue';结果 外部项目 多依赖了 一个 vue.runtime.esm.js 。

3、代码内去掉 console

生产模式下去掉
new UglifyJsPlugin({
          uglifyOptions: {
            compress: {
              warnings: false,
              drop_debugger: true,
              drop_console: true,
            },
          },
          sourceMap: false,
          parallel: true,
        })

4、cdn 有条件上呗

转载于:https://www.cnblogs.com/fan-zha/p/11014386.html

vue项目首屏加载过久处理笔记相关推荐

  1. vue项目首屏加载优化

    1.将第三方资源使用cdn引入 将项目中用到的一些第三方库通过cdn的方式引入的话,在打包的时候就不需要对第三方库进行打包,自然就减小了包的大小,首屏加载的时候所加载的内容也就减少了,加载时间就少了. ...

  2. vue项目首屏加载慢解决方案

    项目场景: 近期项目打包上线后,首屏加载速度太慢.记录一下优化的步骤; 解决方案: 一.开启Nginx压缩 参考知乎文章 vue-cli3项目开启gzip压缩 - 知乎 下图已经是 开启了 Nginx ...

  3. vue项目首屏加载过慢解决方案

    前言 因为我的一个vue项目首页打开加载了好久,所以决定优化一下.发现是打包体积太大了,页面才加载慢主要是第三方库. 优化着优化着就想要更好一点,于是逛博客搜索,参照了几个博主的解决方法整理出一下几点 ...

  4. [vue] SPA首屏加载速度慢的怎么解决?

    [vue] SPA首屏加载速度慢的怎么解决? 1.通过Gzip压缩 2.使用路由懒加载 3.利用webpack中的externals这个属性把打包后不需要打包的库文件都分离出去,减小项目打包后的大小 ...

  5. 记前端项目首屏加载优化(网络篇)

    继之前的一篇<记前端项目首屏加载优化(打包篇)>之后,这次来讲一讲我的首屏加载在网络方面的优化?. 写在前面 资源加载是一个网站的展示在用户浏览器的必经之路,资源的请求次数和响应时间决定了 ...

  6. Vue:首屏加载页实现

    众所周知vue项目通常首屏加载会非常慢,在浏览器加载资源时,可以在首屏加入一个loading页面. 首先找到在根目录下的 /pulic/index.html: 在 index.html 中找到我们的i ...

  7. Vue - 网站首屏加载等待动画(极简解决方案)

    效果图 前言 解决白屏等待方案非常多,个人而言评判好坏的标准即 用最少最简单的代码实现相同的功能. 在 Vue 项目中,网站加载时会显示自定义动画(CSS),当文件加载完毕且页面显示时自动移除动画. ...

  8. vue实现首屏加载等待动画 避免首次加载白屏尴尬

    为什么80%的码农都做不了架构师?>>>    0 直接上效果图 1背景,用户体验良好一直是个重要的问题. 2怎么加到自己项目里面? 复制css html代码到自己的index.ht ...

  9. VUE 首屏加载时间优化

    在Vue项目中,引入到工程中的所有js.css文件,编译时都会被打包进vendor.js,浏览器在加载该文件之后才能开始显示首屏.若是引入的库众多,那么vendor.js文件体积将会相当的大,影响首屏 ...

最新文章

  1. Xamarin XAML语言教程XAML文件结构与解析XAML
  2. 谷歌大脑提出“洗发水”二阶优化算法,Transformer训练时间减少40%,Jeff Dean点赞...
  3. 1.IDA-基本操作(改变Image Base地址、打开、保存IDA的不同方式)
  4. BootStrap的入门和响应式的使用
  5. 【Spring】Spring事务失效的 8 大原因
  6. mysql5.6安装配置教程_Centos6.8 Mysql5.6 安装配置教程
  7. DockerDesktop安装以后,控制台输入docker version报错This error may indicate that the docker daemon is not running
  8. 谈谈目前我对区块链(Blockchain)的认识
  9. AI圣经!《深度学习》中文版隆重上市!美国亚马逊AI领域排名第一畅销书!
  10. TLSF: Memory allocator real time embedded systems
  11. java导出地图矢量Shp文件
  12. CentOS7--安装谷歌浏览器--详细步骤
  13. z变换判断稳定性和因果性_试题库 - 7:z变换 -
  14. 菩萨蛮 生如夏花(赵敏)
  15. 笑话段子手微信小程序源码自带内容采集随时有新内容
  16. 项目经验不丰富、技术不突出的程序员怎么打动面试官?
  17. 深造分布式 打败面试官 招式三 直捣黄龙
  18. Flask外部访问服务器最简单的操作
  19. 防止刷新页面造成表单重复提交
  20. 计算机图形学直线裁剪原理,计算机图形学-3.2用Liang-Barsky算法实现直线段裁剪...

热门文章

  1. Element-UI 要怎么学?官方文档!
  2. 软件测试学习指南(更新中)
  3. 软件设计师11-数据库
  4. mysql 源码设计,java+mysql大学网络社区平台设计+源代码
  5. python里的英文歌叫什么_一首英文歌名最后是onshould
  6. Vue父组件监听子组件调用删除模块(个性化页面设置会使用到)
  7. python通过get方法获取key对应的值
  8. linux清除asm磁盘分区,ASM Diskgroup添加与删除
  9. matlab在循环中保存jpg格式_Matlab如何循环读取文件
  10. 计算机无法安装应用,编程软件无法安装或报错