NUXT项目打包优化策略

html-css029

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

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