阿牛博客

vue项目的各种优化

项目优化,是个老生常谈的问题,其中,减少js文件大小,是公认最直接优化方式了。但是当js越来越大,在一个js中的分析js的各种依赖,然后把他们分离出来,一直以后是个让人头痛的问题,好在有个很好用的webpack插件:webpack-bundle-analyzer,它可以以可视化的方式(直观的树状图),让打包后每个js的依赖一目了然,如图:
(tip:图片点击可放大,方便移动端浏览)
(stat size(打包前文件的大小) parsed size(打包后文件的大小) gzip size (开启gzip文件的大小))
ps:为了兼容之前pc版移动端项目的一些功能,不得不引入了‘胖大’的jq,哭~
这样,我们可以发现构建包中真正引入的依赖,发现大体有哪些模块组成,找到公共的模块分离优化它。

webpack-bundle-analyzer使用方法:

1.安装webpack-bundle-analyzer插件

2.在webpack.prod.conf.js增加配置

3.执行打包命令即可

(tip:图片点击可放大,方便移动端浏览)
(如上图,在浏览器打开即可)
下面上点干货,贴一些常用到的一些打包优化方案:

一.webpack项目打包-打包过程中排除通用文件+剔除的公共文件并在入口文件中cdn方式引入

通过上面webpack-bundle-analyzer插件分析,我们可以知道vendor.xxx.js的360多k公共文件有vue、vue-router、vue-resource、vue-vuex、jquery、mint-ui等,接下来通过webpack的打包配置把这些文件从打包里面独立出去,并且在入口文件index.html中以cdn方式引入:

1-1.修改webpack配置:build/webpack.base.conf.js

这里有个小坑,externals对象中的前面是的key是插件名,后面是value是插件的全局变量,这个value值一定要写对,不然乱写会报错,这个值不知道到话可以直接去看插件的源码,如vue-router中的VueRouter变量(一般找出挂在window对象,或者全局引入的this下面的变量即可):
(tip:图片点击可放大,方便移动端浏览)

1-2.排除的js在index.html引入

这里向大家推荐一下BootCDN,免费的cdn加速,常用的框架插件的加速都有,赞个,官网:https://www.bootcdn.cn
下图1是我博客中未分离前vendor的模块情况,图2是分离后的效果:
(tip:图片点击可放大,方便移动端浏览)
(图一)
(tip:图片点击可放大,方便移动端浏览)
(图二)
效果还是挺明显的~

二.js按需加载(路由懒加载)

具体操作:

2-1.老方式:在路由里面利用require.ensure函数配置:

如:

2-2.新方式:使用webpack中的syntax-dynamic-import 插件

2-2-1.安装syntax-dynamic-import 插件

2-2-2.配置.babelrc文件(若没有,则新建这个文件,和package.json同级)

2-2-3.在vue路由配置文件中直接import方式引入:

三.图片压缩

我们都知道cli里面小图片会被打包成base64,而大一点的图片是不会做处理的,所以有必要加个图片打包压缩插件:image-webpack-loader
步骤:

3-1.安装image-webpack-loader 插件

3-2.在build\webpack.base.conf.js文件中配置

四、利用vue内置组件keep-alive进行页面缓存

为了使页面浏览起来更加顺畅,我们可以对一些数据量比较大,数据及时更新要求没那么严格的页面利用keep-alive组件进行页面缓存,该组件主要用于保留组件状态或避免重新渲,即dom不会被重新渲染,接口不会去请求。当然如果在缓存的页面被切换到需要执某些js逻辑的时候可以在activated钩子里面进行逻辑编写。
具体实现方法:

4-1.首先在路由的配置项里面的meta对象下面增加一个标识keepAlive表示是否缓存页面

4-2.在入口文件App.vue里面引入

vue优化的方法还有很多,文章未完,待续~

给个赞() 踩一下()

温馨提示:本站文章除注明转载外,均为原创文章,会经常更新知识点以及修正一些错误,因此转载请保留原出处,方便溯源,避免陈旧错误知 识的误导,同时有更好的阅读体验。

本文链接: http://aniublog.com/archives/602

上一篇: 前端解决接口跨域——反向代理配置(nginx和webpack) » 下一篇: Visual Studio Code 使用指南、技巧 »