NUXT项目打包优化策略

html-css022

NUXT项目打包优化策略,第1张

用nuxt开发完项目之后,开开心心打包扔上服务器准备收工,却没多久,测试童鞋遗憾的告诉我,压测50并发未通过。what?好吧。咱们再接下来老老实实的研究怎么压缩打包优化性能。 性能优化,无外乎那几个方案:文件压缩,文件缓存,CDN,DNS 预解析。。。 这里我们首先看一下不加任何优化的项目,打包后的分布:这里能看到element-ui占了绝大部分的打包空间,是因为全局引入了element-ui,所以即使我们只使用了一部分的elemnt组件,但仍然把整个element给打包进来了。 所以这里有一个可以优化的点: 只引入element使用的组件,这样在打包的时候只需要打包使用的组件,体积就会减小很多 。 我们再来看看这么处理之后,我们打包出来的效果: 可以看出,我们减少了将近 400kb 的体积,效果十分显著。 好了,我又自信满满的把包丢到服务器上,准备金盆洗手。