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-09-19 14:21:47

    Dubbo和spring cloud微服务框架区别和介绍

    关于 Dubbo 和 Spring Cloud 的相关概念和对比,上面已经叙述的很清楚了,我个人比较倾向于 Spring Cloud,原因就是真正的微服务框架、提供整套的组件支持、使用简单方便、强大的社区支持等等,另外,因为考虑到 .NET/.NET Core 的兼容处理,RPC 并不能很好的实现跨语言(需要借助跨语言库,比如 gRPC、Thrift,但因为 Dubbo 本身就是“gRPC”,在 Dubbo 之上再包一层 gRPC,有点重复封装了),而 HTTP REST 本身就是支持跨语言实现,所以,Spring Cloud 这一点还是非常好的(Dubbox 也支持,但性能相比要差一些)。

  • 2019-09-22 07:12:04

    git Please move or remove them before you can merge

    这是因为本地有修改,与云端别人提交的修改冲突,又没有merge. 如果确定使用云端的代码,最方便的解决方法是删除本地修改,可以使用以下命令: git clean -d -fx

  • 2019-09-22 07:36:52

    ALIN10146-自查方案

    报错原因 1.请求appid应用未上线或者是应用类型是第三方应用 2.签约权限问题 3.签名类型使用错误 4.请求参数问题 5.秘钥匹配问题 6.应用类型问题

  • 2019-09-22 07:37:44

    ALIN10146,ALI38173支付宝APP支付集成时出现的问题

    最近在做支付宝APP的集成,遇到了一堆问题。百度不到,ALI64还好点,ALI38173基本上就没了。我也是测试了很久才解决的。ALI64的解决方案是因为要对私钥有问题。ALI38173是签名有问题。签名的解决方...

  • 2019-09-22 22:32:20

    Spring Shiro 使用默认的Session会话管理

    项目中用到了shiro session会话管理机制,今天来总结一下,以下都是在spring boot框架实现。 shiro的session管理机制很完善,也是独立于j2ee容器且不依赖的,所以我们完全可以使用shiro提供给我们的session会话管理来实现我们的业务逻辑,默认提供的sessionDAO是memorySessionDAO,这里也主要讲它的配置和原理。 首先来看下如何在spring boot下配置默认的session会话管理: ShiroConfig类:

  • 2019-09-23 16:17:13

    consola 教程

    consola 和 console 只差一个字母,并且它们都是控制器日志输出的好帮手。console 在某些方面,使用有些局限性。consola 是一个功能更丰富,更漂亮的控制台日志输出控件。今天我们一起来学习它的