vue 项目打包出错小记

Posted 2023-04-19

参考技术A 错误截图：

解决方案：
方法一：删掉 node_modules,重新从淘宝源安装，可以打包成功

方法二：仍然是npm安装，根据错误提示，发现可能是 mini-css-extract-plugin没有安装上，所以执行 npm i mini-css-extract-plugin --save-dev ， 安装完成后，再打包可以打包成功了

小记vue项目打包优化

参考技术A 开发vue的项目也有两三年了，从小白前端到小白前端，深感学无止境、学海无涯、活到老学到老呀
经常被听到：我们的网站好慢呀
因为最近的项目都放在国外，还以为是这个原因，再加上需求一堆一堆的来，也没时间去想优化的事儿。现在终于是闲了，借鉴各路大神的方法，这里做个小总结，以备下次忘记了，哈哈

优化方向：

其实就是一个目标，减少打包后的体积，减少首次加载的时间。

2.按需引入
项目中我用了 element-ui, 首页加载时， element-ui要在app.js之前加载，它的体积也不小，首页引入多少有点占资源，所以这里想尽可能只引入首屏需要的组件，其它组件按需加载就好。
element-ui官方有按需加载配置的例子，但由于在 vue.config.js中配置了三方包打成一个包，所以按需加载好像失效了，而我也不想每个页面都引用一下组件，所以就想了另外的方法

项目中我主要是针对首屏加载做了优化，我觉得只要首屏快速出来了，其它的就慢慢来吧，哈哈
还有其它的一些方向，路由懒加载，外部引入资源，这些都很容易了，就不罗列了