如何实现前端优化,如何发现哪些前端优化?

news/2024/7/19 14:11:41 标签: vue, 前端, 网络优化, webpack, js

1.一幅图看出哪些需要优化!怎么做呢?

2.npm安装webpack-bundle-analyzer

npm install webpack-bundle-analyzer -D

3.配置webpack-bundle-analyzer

//在vue.config.js引入
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
//配置
module.exports={
   configureWebpack:config=> {
    config.plugins.push(
        new BundleAnalyzerPlugin()
       ),
     }

}

4.如何使用?

通过npm run serve 跑起项目。
跑起来之后会自动跳转页面,显示各各文件占用的空间大小。
如果没有自动跳转 请手动进入地址:http://127.0.0.1:8888/   即可。


http://www.niftyadmin.cn/n/861343.html

相关文章

seo前端优化简述

前端SEO优化简述SEO优化它的目的怎么使用简述SEO优化 SEO(Search Engine Optimization):汉译为搜索引擎优化。是一种方式:利用搜索引擎的规则提高网站在有关搜索引擎内的自然排名。 它的目的 简单来说它的目的就是对网站进行深…

前端系列一解决git冲突问题

先说一下什么git冲突问题,当你在一个公司团队中参与到一个项目中,一般每个人负责同一个项目的不同模块及写不同的文件,出现冲突的原因,举个例子,小明负责项目中A文件的修改,小李负责项目中B文件的修改&…

前端系列二:Vue3较Vue2的变化及缺点

Vue2选项API和Vue3组合API: Vue2的选项API的缺点: 当有多个功能实现时在data里定义多个的数据和在mthods里的多个方法时会 导致不同的功能和逻辑交叉在一起,不利于阅读不好维护 Vue2和Vue3生命周期的改变: 在Vue2里常见的生命…

前端系列三:Vite和Webpack区别及Vite特点总结

Vite启动同一项目时速度要优于Webpack 如果使用Webpack保存内容时它会再去编译,再告诉编译时间,会有编译时间的问题,随着项目越来越大 编译时间缺点会越来越明显 Vite改变内容时会告诉你热更新了速度超越秒级 同一代码量级,Web…

前端系列四:Typescript中遇到多个any影响性能解决方案

第一种方案: 可以在项目创建初期去tsconfig.json里去配置:"noImplicitThis": true 这样可以当表达式值为any类型的时候,生成一个错误 第二种方案: let xj: unknow 小新 let b: string xj as string unknown(不知道是什么类型…

前端系列五:Vue3中利用js跳转页面

goPage() { this.Z$router.push({path:"/",query:{search:超人}}) }

前端系列六:Vue3项目中遇到的原型方法问题

Vue3项目中引入插件报错问题: Cannot read properties of undefined (reading $api) 无法读取未定义的属性(读取“$api”) 思路: 先去查一下Vue3在原型上写法是否有改变; Vue3在原型上定型方法已经跟Vue2不同&#…

Hive on Zeppelin

** Hive on Zeppelin ** 官网:zeppelin.apache.org 做大数据的人应该对Hive不陌生,Hive应该是大数据SQL引擎的鼻祖。历经多个版本的改进,现在的Hive3已经具备比较完善的ACID功能,能够同时满足交互式查询和ETL 两种场景。 那怎…