vue + webpack 前端性能优化

原创 Fly丶 教程 vue专题 543阅读 30 天前 举报

vue + webpack 前端性能优化

背景

对于程序开发者而言,开发一个项目不仅仅注重效率和功能,前端的性能问题也是非常重要的。这直接影响用户的体验,从而间接的也反应该项目质量的好坏。 影响项目性能的原因有很多,如:资源文件的大小,业务的繁杂程度等,所以前端优化的方式也很多。这些东西很零碎,容易被人遗忘。所以这篇文章中对我平时用的优化方式总结一下,可能不是太全面,大家有其它的优化方式可以留言,互相交流下哟。不说了,麻溜的写。。

优化一: vue-router路由懒加载

懒加载: 也叫延迟加载,即在需要的时候进行加载,随用随载。 使用懒加载的原因: vue 是单页面应用,使用webpcak打包后的文件很大,会使进入首页时,加载的资源过多,页面会出现白屏的情况,不利于用户体验。运用懒加载后,就可以按需加载页面,提高用户体验。

懒加载的写法:

非懒加载的路由配置:

优化二:webpack压缩图片(减少图片大小)

  一般在vue 项目中用webpack 打包时,会根据 webpack.base.conf.jsurl-loader 中设置limit大小来对图片处理,对小于limit的图片转化为base64格式,其余的不做操作。所以对有些较大的图片资源,在请求资源的时候,加载会很慢,可以用image-webpack-loader 来压缩图片。

安装:
配置:

   在 webpack.base.conf.js文件中引入配置(此项目我用的是脚手架搭建的,所以是webpack.base.conf.js

优化三:打包后的js过大,将js打包多个文件

  由于webpack打包后的js过大,以至于在加载资源时间过长。所以将文件打包成多个js文件,在需要的时候按需加载。

优化方案:

优化四:去掉不必要的插件

1:打包时,将一些不必要的插件可以去掉,以防止打包一些无用的资源,导致打包后的文件过大,影响性能。

2:在引入第三方插件的时候,如果该插件的组件过大,可以按需引入,如 element-ui

3:使用 webpack.optimize.UglifyJsPlugin 插件压缩混淆js代码,使用方法如下:

优化五: gzip压缩

  web前端项目,静态资源放在 cdn 上比较多, gzip 的压缩是非常必要的,它直接改变了 js 文件的大小,减少两到三倍。 参考 加速nginx: 开启gzip和缓存nginxgzip 配置非常简单,在你对应的域名底下,添加下面的配置,重启服务即可。 gzip_comp_level 的值大于 2 的时候并不明显,建议设置在 1或者2 之间。

  这种方法我没有用过,用过的亲可以给我留言。

优化六: 服务器缓存

为了提高服务器获取数据的速度,nginx缓存着静态资源是非常必要的。如果是测试服务器对html应该不设置缓存,而js等静态资源环境因为文件尾部会加上一个hash 值,这可以有效实现缓存的控制。

好了,就总结到这里了,这些优化的方法希望可以帮助到你们,其中优化五和优化六,我也没有使用过,具体的可以再详细的百度一下。 你们如果有其它好的优化方式,可以加群:866109386和我分享一下。ღ( ´・ᴗ・` )比心。

出处:https://juejin.im/post/5bc5c106e51d450e7a253e1b

评论 ( 0 )
最新评论
暂无评论

赶紧努力消灭 0 回复