小记vue项目打包优化

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

优化方向:

  1. 拆包
  2. 按需引入

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

  1. 拆包
    在vue.config.js中配置chainWebpack,将引入的三方插件分别打包,这样就可以将它们从 app.js中分离出来
    首页加载时,会加载 app.js 渲染页面,所以分离出这些三方包,肯定可以提高一下速度

    举个例子:
    image.png

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

把需要立即使用的组件和不着急使用的组件拆开引入,项目中,首屏是登录页面,所以我只放了几个需要的表单组件,其它组件都按异步引入的方式加载
image.png

在main.js中同步或异步引入组件,可以命个名,方便打包后查看
image.png

这是打包后的样子,已经拆成三个包了,而首屏加载时,只加载其中同步引入的包,其它部分就看浏览器了
image.png

这是打包后,首次会引入的脚本文件。
image.png

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

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容