NUXT项目的性能优化

背景

---

 

　　新入职公司还处于交接中，最近一个海外的官网其余同事更新以后出现访问超时问题，部分超大的js下载不下来的问题，就尝试着想要优化一下。

项目结构是 NUXT2.0+ Element UI，使用 NUXT的主要缘由仍是为了SEO优化，Vue在SEO上是弱项

过程

---

打算使用webpack打包

　　翻了翻NUXT的文档 发现这家伙其实仍是基于Webpack打包的，因而乎就想和普通的VUE项目通常使用 DLLPlugin 、 CommonChunkPlugin将大文件分割 而后把公用的插件 ‘element ui’ 、’vue2-editor‘ 之类的单独打包成一个js这样子就不会阻碍页面加载之类的 巴拉巴拉巴拉 ，看着nuxt.config.js 有点无从下手的感受， 找了找 在NUXT 中如何使用 webpack 插件， 官方有给出示例，https://zh.nuxtjs.org/faq/webpack-plugins。尝试用了一下发现没有效果 多是我不会用，而后就放弃了使用webpack插件 开始了漫长的NUXT压缩教程寻找之路

寻找NUXT的解决方案

　　通过漫长的百度寻找终于找到了一个NUXT 的比较完整的教程，不过是台湾的（ps：为何国内没有找到完整的教程，可能用到的人很少吧，反正教程少的可怜）https://ithelp.ithome.com.tw/users/20107107/ironman/1614?page=1,，这是一个完整的教程，我找的主要是使用SplitChunks 这个是 NUXT 2.0 + 开始支持的配置  （这里是地址：https://ithelp.ithome.com.tw/articles/10207669） 里面有讲到使用 LodashModuleReplacementPlugin 我在使用的时候老是提示 'babel-plugin- not found' , 其实使用 SplitChunks 的时候效果就很明显了就没有继续研究怎么使用LodashModuleReplacementPlugin  

这是使用后的效果：

不少大文件都已经被分割成小文件了  两个最大的文件你们能够忽略 ，这两个是svg 文件，主要是图标，后面改了引用方式也就不会打包成js 文件了

剩下的钉子户就只剩下了element ui 解决它基本上就不存在大文件了

Element UI 部分引用 

　　仔细查看了项目对element ui 发现使用的是彻底引用，可是实际上用到的插件不多， 这就好办了直接改为部分引用， 果不其然改为了部分引用文件直接缩小一半 ，同时将 图标的引用方式修改以后去掉了两个大文件， 效果图以下

结语

---

 

　　写这个随笔主要是记录一下当时优化的思路，记性很差防止忘记， 主要是作后端开发，前端开发都是兼职啦 。  或许有再优化会继续更新， 小白一枚欢迎大神指点