vue应用移动端访问缓慢问题

由于移动端的javascript处理引擎相对于pc端在处理复杂计算或大量数据时,可能会出现性能瓶颈,从而导致访问页面缓慢严重还会出现白屏情况,所以针对此问题做以下处理提升性能。

1、打包时压缩js文件

  • 安装TerserPlugin插件
bash 复制代码
npm install terser-webpack-plugin --save-dev
  • 在 Webpack 的配置文件vue.config.js中设置 optimization
bash 复制代码
module.exports = {
    mode: 'production', // 设置为生产模式
        optimization: {
            minimize: true, // 启用压缩
            minimizer: [
                new TerserPlugin({
                    terserOptions: {
                        compress: {
                            drop_console: true, // 去掉 console.log
                        },
                    },
                }),
            ],
        },
};

2、看前后区别

  • 配置前文件大小
  • 配置后文件大小

效果非常明显,访问速度也提升了

相关推荐
摇滚侠4 小时前
Vue 项目实战《尚医通》,完成预约通知业务,笔记21
前端·vue.js·笔记·前端框架
IT_陈寒4 小时前
SpringBoot性能优化实战:我从10万QPS项目中总结的7个核心技巧
前端·人工智能·后端
顾安r4 小时前
11.9 脚本网页 消消乐
前端·javascript·flask·html·pygame
宋哈哈5 小时前
页面水印sdk源码
java·前端·javascript
Kikyo--5 小时前
前端基础面试题(Css,Html,Js,Ts)
前端·javascript·css·typescript·html
火车叼位5 小时前
处理volta切换node版本之后pnpm没有识别的问题
前端·javascript
七号练习生.c5 小时前
JQuery&Ajax
前端·ajax·jquery
FinClip5 小时前
AI时代,金融科技如何落地“对话就能办业务”?
前端
七号练习生.c5 小时前
结合Html、Javascript、Jquery做个简易的时间显示器
javascript·html·jquery
YianNib5 小时前
状态机是什么?
javascript