首页>>前端>>JQuery->vue优化方案(vue如何性能优化)

vue优化方案(vue如何性能优化)

时间:2023-12-15 本站 点击:0

vue性能优化之build后包体积太大

安装compression-webpack-plugin插件。前端将文件打包成.gz文件,然后通过nginx的配置,让浏览器直接解析.gz文件,可以大大提升文件加载的速度。

在vue.config.js文件中的chainWebpack配置插件,默认会在8888端口打开 根据之前打包分析图来看,主要是locale下moment的其他语言包占用体积较大。

使用splitChunks插件,拆分体积超大的包,解决单个包过大的问题。

优化对比 :未优化前:index.html引入一个main.js文件,体积2M以上。优化后入:index.html引入main.js、commons.js、charts.js、other.js。以达到将main.js平分目的。

项目开发中,使用了很多依赖包,如 Vue 、路由管理 Vue-router 、状态管理 Vuex 、UI组件库( ElementUI 、 Vant )、图表( echarts )等。打包构建,发现有一些包体积过大,会影响首页加载速度。

vue-cli3.0如何实现资源加载的优化

所以将JS文件拆开,点击某个页面时再加载该页面的JS是一个很好的优化方法。 这里用到的就是vue的组件懒加载。在router.js中,不要使用import的方法引入组件,使用require.ensure。

依赖包不是全局引入的会导致vue3画面加载卡顿。改为组件内按需引入,可大大降低加载时长。或者将组件引入方式改为cdn引入。也可看network,点击ALL,看看哪些文件加载时间长,针对性的优化,静态文件压缩、js文件切片等。

三种方法:推荐第三种 修改vueclie构建的npm源: 打开C:\Users\admin.vuerc文件 useTaobaoRegistry配置如果是true改为false就可以了,或者情况相反的改为true。

组件异步加载即为路由的异步 方法一:方法三:webpack提供的require.ensure()vue-router配置路由,使用webpack的require.ensure技术,也可以实现按需加载。

vue打包优化——vendor体积过大

1、至此 vendor 的拆解工作完成, vendor 体积小于500K, 小程序开发者工具顺利完成打包工作。

2、在vue.config.js文件中的chainWebpack配置插件,默认会在8888端口打开 根据之前打包分析图来看,主要是locale下moment的其他语言包占用体积较大。

3、基于vue-cli0构建项目,npm引入多个第三方包。build之后,包体积太大导致首屏过长。

4、使用“js压缩”工具可缩小体积,可百度搜索“js压缩”查找工具 把vendor.js代码ctrl + a全选,再ctrl + c复制,粘贴到js压缩工具里,点击“压缩”或“普通压缩”,然后再把压缩后的代码复制粘贴到vendor.js文件中。

5、安装compression-webpack-plugin插件。前端将文件打包成.gz文件,然后通过nginx的配置,让浏览器直接解析.gz文件,可以大大提升文件加载的速度。

6、优化对比 :未优化前:index.html引入一个main.js文件,体积2M以上。优化后入:index.html引入main.js、commons.js、charts.js、other.js。以达到将main.js平分目的。


本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
如若转载,请注明出处:/JQuery/35287.html