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

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

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

相关推荐
徐小夕2 小时前
我用 AI 撸了个开源"万能预览器":浏览器直接打开 Office、CAD 和 3D 模型
前端·vue.js·github
小码哥_常2 小时前
Flutter Android 延迟加载代码指南:提升应用性能的关键
前端
这是个栗子2 小时前
TypeScript(三)
前端·javascript·typescript·react
kvo7f2JTy2 小时前
基于机器学习算法的web入侵检测系统设计与实现
前端·算法·机器学习
北风toto2 小时前
前端CSS样式详细笔记
前端·css·笔记
nanfeiyan2 小时前
git commit
前端
前端精髓5 小时前
移除 Effect 依赖
前端·javascript·react.js
码云之上5 小时前
从一个截图函数到一个 npm 包——pdf-snapshot 的诞生记
前端·node.js·github
码事漫谈5 小时前
AI提效,到底能强到什么程度?
前端·后端
IT_陈寒6 小时前
React hooks依赖数组这个坑差点把我埋了
前端·人工智能·后端