Nuxt打包vendors.app.js很大，Nuxt打包优化。【Nuxt打包问题解决】

迷南。 2023-06-15 09:47 427阅读 0赞

> 1、所有文章优先发表在个人博客上： [https://www.xdx97.com][https_www.xdx97.com]  
> 2、后续如果有修改的话，可能忘记更新到CSDN了，给你带来不便，抱歉。  
> 3、个人博客本篇文章地址 ： [https://www.xdx97.com/article?bamId=647110491071578112][https_www.xdx97.com_article_bamId_647110491071578112]

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

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

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1RvbXdpbGRib2Fy_size_16_color_FFFFFF_t_70]

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

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

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

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

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1RvbXdpbGRib2Fy_size_16_color_FFFFFF_t_70 1]

## 2、分析打包大的原因 ##

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

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

2-1-1：使用CDN加速，如果你是使用的ElementUi可以使用这个，不要本地安装了 [https://www.bootcdn.cn/element-ui/][https_www.bootcdn.cn_element-ui]  
2-1-2：但是如果找不到CDN呢，就像我现在的个antd-design-vue，那么你可以采取按需加载 [https://www.xdx97.com/article?bamId=647074798064631808][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、对用户来说，他已经看到数据了，这样也就够了。

[https_www.xdx97.com]: https://www.xdx97.com/
[https_www.xdx97.com_article_bamId_647110491071578112]: https://www.xdx97.com/article?bamId=647110491071578112
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1RvbXdpbGRib2Fy_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20191121164310773.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1RvbXdpbGRib2Fy,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1RvbXdpbGRib2Fy_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/201911211643478.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1RvbXdpbGRib2Fy,size_16,color_FFFFFF,t_70
[https_www.bootcdn.cn_element-ui]: https://www.bootcdn.cn/element-ui/
[https_www.xdx97.com_article_bamId_647074798064631808]: https://www.xdx97.com/article?bamId=647074798064631808