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、对用户来说,他已经看到数据了,这样也就够了。


  • 2019-12-19 16:44:01

    根据条件配置多个npm仓库

    scope 是一种很好的包管理方式。统一的“命名空间”,清晰、好辨识;在 registry 中使用统一的 organization 管理,不必担心命名冲突和冒用等。 在实际使用中,一个常见的场景是公司的私有仓库。使用统一的 scope 定义在私有仓库中定义私有包,绝对是一个非常好的方式。 指定 scope 从指定仓库安装

  • 2019-12-20 13:24:58

    瓦片地图生成使用以及原理

    我们都知道地球是圆的,电脑显示器是平的,要想让位于球面的形状显示在平面的显示器上就必然需要一个转换过程,这个过程就叫做投影(Projection)。在地球上我们通过经纬度来描述某个位置,而经过投影之后的地图也有自己的坐标系统,本篇文章就来详细介绍在百度地图API中涉及的各种坐标体系。

  • 2019-12-20 13:27:16

    腾讯地图谷歌和高德地图等自定义地图区别

    腾讯、百度、Google的地图投影均采用Web Mercator 投影坐标系;腾讯与Google的地图瓦片分辨率及切片范围是完全相同的,仅仅是命名规则稍有不同,这就使得同一位置和缩放级别的地图瓦片是完全可以重叠的;而百度地图每个缩放级别分辨率与前两者均不相同,而且地图瓦片的坐标原点做了一定的偏移,导致百度地图与前两者的瓦片是无法重叠的,这是因为百度在GCJ-02的基础上又进行了加密处理,形成了百度独有的BD-09坐标系。

  • 2019-12-22 08:06:48

    如何快速撤销上一次的commit

    在平时工作中使用git难免会提交一些错误的文件到git库里,这时候,撤销吧,怕把正确的文件删除了,不撤销重新改又很麻烦,下面,我就从提交的三个阶段,来讲解如何撤销错误的操作。