vue网站优化实战之秒开网页
【vue网站优化】网页渲染速度快到极致
在将打包后的dist目录上传到服务器时，往往会出现首次加载页面速度较慢的情况，以下给出几点优化意见
在路由配置文件中，采用路由懒加载
当打包构建应用时，JavaScript 包会变得非常大，影响页面加载。如果我们能把不同路由对应的组件分割成不同的代码块，然后当路由被访问的时候才加载对应组件，这样就会更加高效。
component: () => import(/* webpackChunkName: "login" */ '@/views/login/login.vue'),
关闭webpack的productionSourceMap选项
webpack中有一项productionSurceMap设置，productionSourceMap是什么？是打包后是否让每个js文件都生成一个.map文件？true代表生成，false代表不生成。那么.map文件作用是什么？因为打包后代码都是经过压缩加密的，如果出现报错情况，输出错误信息，不会知道是哪里代码有问题，.map就行没有加密一样，能准确输出哪一行出错了。但是在生产环境中，我们是不需要输出错误信息的，在webpack.config.js中找到productionSourceMap选项，并关闭它
productionSourceMap: false,
使用uglifyjs-webpack-plugin来压缩js文件
官网叙述很直白，就是直接压缩，在此不做过多叙述
const UglifyJsPlugin = require('uglifyjs-webpack-plugin')
new UglifyJsPlugin({
uglifyOptions: {
compress: {
warnings: false,
}
},
sourceMap: config.build.productionSourceMap,
parallel: true
}),
使用cdn加速用来加载三方插件
服务器端开启gzip压缩
前端采用compression-webpack-plugin插件将代码压缩为gzip结尾的文件，后端通过nginx开启gzip压缩，完成完整压缩流程
插件描述
const CompressionWebpackPlugin = require(‘compression-webpack-plugin’)
webpackConfig.plugins.push(
new CompressionWebpackPlugin({
asset: '[path].gz[query]',
algorithm: 'gzip',
test: new RegExp(
'\.(' +
config.build.productionGzipExtensions.join('|') +
')$'
),
threshold: 10240,
minRatio: 0.8
})
)
前端
nginx
gzip_static: on
注：在github pages上可直接上传gzip文件，github默认开启gzip选项，由于webpack配置可能不同，所以仅提供解决思路，不建议直接copy，如果对此配置感兴趣,可前往 github查看具体配置
总结
到此这篇关于vue网站优化实战之秒开网页的文章就介绍到这了,更多相关vue秒开网页内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
这篇文章主要介绍了vue2中使用sass并配置全局的sass样式变量的方法,本文给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下2018-09-09
toRaw和markRaw是Vue 3中引入的新API,用于更精细地控制对象的代理和响应性,它们提供了在需要时绕过代理或禁用响应性的能力,有助于提高性能和更好地与第三方库进行集成,本文给大家介绍Vue 3中toRaw和markRaw的使用,感兴趣的朋友一起看看吧2023-10-10
最近需要再页面里做个倒计时,发现用clearInterval()清除定时器失效,下面这篇文章主要给大家介绍了关于VUE设置和清除定时器的方式及遇到的问题的相关资料,需要的朋友可以参考下2022-10-10
这篇文章主要介绍了vue点击导航页面实现自动滚动到特定位置方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-03-03
Vue.js表单标签中的单选按钮、复选按钮和下拉列表的取值问题
这篇文章主要介绍了Vue.js表单标签中的单选按钮、复选按钮和下拉列表的取值问题,非常不错，具有参考借鉴价值，需要的朋友可以参考下2017-11-11
Vue中transition单个节点过渡与transition-group列表过渡全过程
这篇文章主要介绍了Vue中transition单个节点过渡与transition-group列表过渡全过程，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-04-04
elementui中tabel组件的scope.$index的使用及说明
这篇文章主要介绍了elementui中tabel组件的scope.$index的使用及说明，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-10-10
今天小编就为大家分享一篇vue自定义全局共用函数详解，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-09-09
这篇文章主要介绍了浅谈Vue页面级缓存解决方案feb-alive(下),文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-04-04
vue中beforeRouteLeave实现页面回退不刷新的示例代码
这篇文章主要介绍了vue中beforeRouteLeave实现页面回退不刷新的示例代码，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-11-11
最新评论