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

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

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

相关推荐
如果超人不会飞7 小时前
WebMCP:当浏览器学会和 AI「说人话」,你的网页就成了智能体的游乐场
javascript
hunterandroid7 小时前
RecyclerView 进阶:DiffUtil 与列表更新
前端
_codeOH7 小时前
Vue 3 vs React 19:框架还在卷,核心原理就这些
前端·vue.js
the_answer7 小时前
CSS 新时代:浏览器原生能力如何重塑前端开发范式
前端
不会写DN7 小时前
固定背景图不随页面滚动的完美方案
前端
整点可乐7 小时前
cesium实现全景图加载
javascript·cesium
天蓝色的鱼鱼7 小时前
Vite 8 换上 Rolldown 后,前端构建真的会快很多吗?
前端·vite
梦曦i7 小时前
全面解析uni-router v1.2.0功能
前端·uni-app
Yiyaoshujuku8 小时前
化学谱图数据API接口,数据字段一览!
linux·服务器·前端
dualven_in_csdn8 小时前
一键起飞调用示例
android·java·javascript