vue应用移动端访问缓慢问题
由于移动端的javascript处理引擎相对于pc端在处理复杂计算或大量数据时,可能会出现性能瓶颈,从而导致访问页面缓慢严重还会出现白屏情况,所以针对此问题做以下处理提升性能。
1、打包时压缩js文件
- 安装TerserPlugin插件
npm install terser-webpack-plugin --save-dev
-
在 Webpack 的配置文件
vue.config.js
中设置 optimization
module.exports = {
mode: 'production', // 设置为生产模式
optimization: {
minimize: true, // 启用压缩
minimizer: [
new TerserPlugin({
terserOptions: {
compress: {
drop_console: true, // 去掉 console.log
},
},
}),
],
},
};
2、看前后区别
- 配置前文件大小
- 配置后文件大小
效果非常明显,访问速度也提升了