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


  • 2017-02-16 15:14:14

    动态加载js和css

    开发过程中经常需要动态加载js和css,今天特意总结了一下常用的方法。

  • 2017-02-17 17:11:24

    mysql插入数据后返回自增ID的方法c

    产生的ID 每次连接后保存在服务器中。这意味着函数向一个给定客户端返回的值是该客户端产生对影响AUTO_INCREMENT列的最新语句第一个 AUTO_INCREMENT值的。这个值不能被其它客户端影响,即使它们产生它们自己的 AUTO_INCREMENT值。这个行为保证了你能够找回自己的 ID 而不用担心其它客户端的活动,而且不需要加锁或处理

  • 2017-02-21 07:59:45

    不会被 iOS 停掉的网页定时器

    其实这个标题略微有点标题党:iOS 中,除了少数服务(如播放音乐),大部分 App 在用户按了 Home 键之后,过不了多久就会被完全冻结,这对 Safari 同样适用。本文不考虑这样情况,只考虑 Safari 运行时,怎样让定时器持续工作。

  • 2017-02-24 15:04:10

    PHP 中的 9 个魔术方法

    这个标题有点牵强因为php有不只9种魔术方法, 但是这些将会引导你使用php魔术方法一个好的开始。它可能魔幻,但是并不需要魔杖。 这些'魔术'方法拥有者特殊的名字,以两个下划线开始,表示这些方法在php特定事件下将会被触发。这可能听起来有点自动魔法但是它真的很酷的,我们已经看过一个简单的例子在 last post,即我们使用一个构造器-使用这个作为我们第一个例子

  • 2017-02-24 15:06:18

    PHP 中的 9 个魔术方法

    这个标题有点牵强因为php有不只9种魔术方法, 但是这些将会引导你使用php魔术方法一个好的开始。它可能魔幻,但是并不需要魔杖。 这些'魔术'方法拥有者特殊的名字,以两个下划线开始,表示这些方法在php特定事件下将会被触发。这可能听起来有点自动魔法但是它真的很酷的,我们已经看过一个简单的例子在 last post,即我们使用一个构造器-使用这个作为我们第一个例子

  • 2017-02-24 15:07:05

    PHP 中的 9 个魔术方法

    这个标题有点牵强因为php有不只9种魔术方法, 但是这些将会引导你使用php魔术方法一个好的开始。它可能魔幻,但是并不需要魔杖。 这些'魔术'方法拥有者特殊的名字,以两个下划线开始,表示这些方法在php特定事件下将会被触发。这可能听起来有点自动魔法但是它真的很酷的,我们已经看过一个简单的例子在 last post,即我们使用一个构造器-使用这个作为我们第一个例子

  • 2017-02-24 15:53:02

    PHP中__get()和__set()的用法实例详解

    在PHP5中,预定义了两个函数“__get()”和“__set()”来获取和赋值其属性,对每个字段进行set和get的操作。只需要加上两个魔术方法即可