nuxtjs打包优化

2020-01-17 21:21:42

参考地址 Nuxt打包vendors.app.js很大,Nuxt打包优化。【Nuxt打包问题解决】

最开始打包vendors.app.js是2.8M,最终打包时是1.8M
虽然并没有打包到极致,但是对于用户来说已经实现了秒开了
你可以感受一下 https://www.xdx97.com/

1、首先我们可以添加一段代码,来看看我们打包的JS到底为什么那么大

image.png

// 开启打包分析analyze: true, 	
assetFilter: function(assetFilename) {	    		
	return assetFilename.endsWith('.js');	    	
}

然后你再使用 npm run build 打包的时候,会弹出一个界面

当然了,它第一次出来的时候我立马关了,这啥玩意???别着急你慢慢的品,慢慢的看。

原来 这是打包后的JS,面积的大小就是体积的大小。这样我们一目了然的看到了到底那里大了

image.png


2、分析打包大的原因

看明白了上面那个图,我们应该是明白了我们打包到底是那里这么大了。
因为我并不知道你的图是怎么样的,我只能按照我的这个去分析

2-1、antd-design-vue,这个UI组件太大了

2-1-1:使用CDN加速,如果你是使用的ElementUi可以使用这个,不要本地安装了 https://www.bootcdn.cn/element-ui/
2-1-2:但是如果找不到CDN呢,就像我现在的个antd-design-vue,那么你可以采取按需加载 https://www.xdx97.com/article?bamId=647074798064631808
2-1-3:再想想其它办法,我目前没想到


2-2:有些不需要全局引入的东西,但是我们依旧全局引入了

比如上面的 mavon-editor.js 。本来它在vendors.add.js里面(因为我全局引入了)

我们可以按需把它移动到需要他们的位置的,这样虽然它的体积没变吗,但是它已然不在vendors.add.js里面了,这样也就减少了大小

2-3:如果还不能解决你的问题,好吧我的情况就算,那么看下面…


3、终极解决办法

3-1:把他们扔到CDN里面全部加速,当然了这样可能需要花一些钱。

3-2:把数据全部放在 asyncData 里面去请求,上面我的博客就是这么做的

1、虽然这样整体的加载速度并不会减少,但是数据却在第一时间返回了。

2、对用户来说,他已经看到数据了,这样也就够了。


  • 2021-02-02 09:42:14

    nuxt.js抽去css文件css代码过多不利于seo

    关于nuxt.js的资料并不是很多,有时候遇到个很简单的问题,百度或者谷歌都不是很容易找到。 其实这个问题就很简单,但是也让我浪费了很多时间,所以在此共勉。

  • 2021-02-03 16:43:11

    Hbase简介

    HBase是一个开源的非关系型分布式数据库,它参考了谷歌的BigTable建模,实现的编程语言为Java。它是Apache软件基金会的Hadoop项目的一部分,运行于HDFS文件系统之上,为 Hadoop 提供类似于BigTable 规模的服务。因此,它可以容错地存储海量稀疏的数据。 作者:Michaelhbjian 链接:https://www.jianshu.com/p/53864dc3f7b4 来源:简书 著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。

  • 2021-02-03 16:47:05

    use_framework头文件不提示

    1、之前没有用use_frameworks!添加swift库,其他库引用使用#import <xxxx.h> 2、使用use_frameworks!添加swift库后,其他库引用使用#import "xxxx.h"

  • 2021-02-03 16:52:27

    ios静态库和动态库区别

    Framework 是 Cocoa/Cocoa Touch 程序中使用的一种资源打包方式,可以将代码文件、头文件、资源文件(nib/xib、图片、国际化文本)、说明文档等集中在一起,方便开发者使用。Framework 其实是资源打包的方式,和静态库动态库的本质是没有什么关系。

  • 2021-02-03 16:57:34

    iOS中的动态库和静态库分析

    由于最近研究组件化后调试时二进制映射源码的功能,发现需要对开发中的动态库和静态库需要有一些了解。所以就有了这篇文章,由于只是了解,并没有深入到编译层面,所以本篇文章只是简单了解一些库的知识,并不深入。

  • 2021-02-03 16:58:39

    iOS静态库与动态库的区别与打包

    这篇主要是记录一下 iOS 下静态库与动态库的打包流程,以便以后用到时快速查阅,供自己也供大家学习记录。同时也简述了一下 动态库 与 静态库 的区别。

  • 2021-02-03 16:59:59

    iOS 静态库和动态库全分析

    库就是程序代码的集合,将 N 个文件组织起来,是共享程序代码的一种方式。从本质上来说是一种可执行代码的二进制格式,可以被载入内存中执行。

  • 2021-02-03 17:01:30

    iOS库 .a与.framework区别

    静态库:连接时完整地拷贝至可执行文件中,被屡次使用就有多份冗余拷贝。 动态库:连接时不复制,程序运行时由系统动态加载到内存,供程序调用,系统只加载一次,多个程序共用,节省内存。