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-14 21:04:05

    聊聊keep-alive组件的使用及其实现原理

    keep-alive是Vue.js的一个内置组件。它能够不活动的组件实例保存在内存中,而不是直接将其销毁,它是一个抽象组件,不会被渲染到真实DOM中,也不会出现在父组件链中。 它提供了include与exclude两个属性,允许组件有条件地进行缓存。

  • 2019-12-14 21:06:58

    vue----keep-alive缓存,activated,deactivated两个生命周期函数,,meta实现缓存

    如果没有缓存,每点击一次导航,内容区就会创建一个组件,该组件会经历整个生命周期,每点击一次,就会创建一个组件,比较浪费性能, 这时,我们就要考虑到是否能将点击过的已创建的组件进行缓存,当再次点击已访问过的组件时,这时,就会从缓存中获取该组件,而不会重新创建,

  • 2019-12-17 11:56:05

    ffmpeg concat video and mix audio,ffmpeg简单快速的合并视频

    在ffmpeg中,官网给出两种连接媒体文件(音频、视频、etc..)的解决方案。 the concat "demuxer" the concat "protocol" 对比而言, demuxer更加灵活一些,需要媒体文件是属于相同的编解码器,但是可以属于不同的容器格式(mp3,wav, mp4, mov, etc..). 而protocol只适用于少数集中容器格式。

  • 2019-12-17 11:58:55

    FFmpeg文章目录

    seek ffmpeg # How to seek in mp4/mkv/ts/flv ffmpeg # flags &= ~AVSEEK_FLAG_BACKWARD ffmpeg # AVSEEK_FLAG concat ffmpeg # concat 连接两个视频 ffmpeg # -f concat -i mylist.txt ffmpeg # concat详解+音画同步策略 截图

  • 2019-12-18 23:26:00

    FFMPEG命令记录

    ffmpeg,拼接两个音频,剪切音频片段,多个音频混音,剪切一段MP4并转换成gif,改变音量大小,音频淡入淡出,音频格式处理