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、看前后区别

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

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

相关推荐
ayqy贾杰8 分钟前
SpaceX 收购 Cursor,马斯克花600亿美元买了个代码编辑器
前端·人工智能·机器学习
云飞云共享云桌面8 小时前
传统工作站 vs 云飞云共享云桌面:制造业设计云桌面选型深度对比
运维·服务器·前端·网络·3d·架构·制造
UXbot8 小时前
如何选择适合公司项目的UI设计工具?企业选型指南
前端·低代码·ui·团队开发·原型模式·设计规范·web app
llz_1129 小时前
web-第四次课后作业
前端·spring boot·web
武清伯MVP10 小时前
前端跨域方案大合集
前端·javascript
一杯奶茶¥10 小时前
基于springboot的失物招领管理系统带万字文档 校园失物招领管理系统 失物认领管理系统java springboot vue
java·vue.js·spring boot·java项目
小刘|10 小时前
Spring AI Alibaba 集成和风天气 API 实战
java·服务器·前端
星星在线10 小时前
我是怎么把页面图片流量砍掉一半的
前端·javascript
木叶子---11 小时前
前端打包出错
前端·人工智能·tensorflow
JAVA面经实录91711 小时前
前端系统化学习计划表(含完整知识思维导图)
前端·学习