四大金刚：编译，部署，框架，代码

一、编译

Webpack

1.自我救赎-webpack自身升级的提升

v4=>v5升级

化缓存 =>cache => 直接利用缓存结果反向跳过构建部分
资源化模块的优化 => assets/resource
打包优化

splitChunks:{
 chunks:'all',
 minSize:{
     javascript:30000
 }
}

2.外援辅助-webpack插件的帮忙

缓存加速

cache-loader 指向性的缓存
terser-webpackplugin 指向性的缓存

减肥瘦身

1.purifycss-webpack -未执行css删除

贴心小助手

1.cleanWebpackPlugin - 自动清理无用文件

3.变革-vite-新一代效率导向工程化工具

核心：利用ESModules，打包esbuild底层使用go语言天生的速度优势。

模式

冷启动/冷服务 =>开发状态下不出包
热更新 => 直接更新源视图（最小化颗粒度）
按需更新

vite缓存三剑客

package.json lockfile vite.config.js 其中一个文件配置改变，会重新预构建

vite缓存文件存在/node_modules/.vite 文件夹下

webpack vite原理对比

相同点：

开发环境vs生产环境 =>运行时&编译打包

不同点：

webpack -编译支撑打包

src(代码文件)=>打包生成bundle =>启动dev-server

hrm把改动的模块（颗粒度取决于每个bundle的大小）以及相关依赖全部编译

vite -路由劫持+ 实时编译

利用了浏览器缓存原理

启动dev-server=>直接请求所需模块路由并且实时编译

hmr只需要让浏览器重新请求改动后的该模块，其他的未改变的部分利用浏览器缓存

二、部署

1 寻址 => <link pre-fetch> => 跨域寻址优化 解析dns

2.静态资源加载优化 =>CDN-Content Delivery Network地理位置层面优化

3.SSR

三、框架&代码

// lodash => lodash-es
//内存泄漏

// 莫名的全局变量
function foo(){
bar1 ='zw
this.bar2 ='zw2
foo()

// 未清理的定时器
setInterval(function(){
 console.log('zw')
}，5000)

// 使用的闭包
function fn(){
    let i=2
    const noFn= item => item +1
    return {
        number: noFn(i),
        i
    }
}

// 网络层浪费
// 防抖
function debounce(func,wait)=>{
    let timeout;
    return function(){
        let context = this
        let args = arguments
        if(timeout){
            clearTimeout(timeout)
        }
        timeout = setTimeout(()=>{
            func.apply(context,args)
        },wait)
    }
}
window.onscroll = debounce(fungtion({
    console.log('debounce')
}，1000)



// 节流
function throttle(fn, delay){
    let prevTime = Date.now()
    return function(){
        let curTime = Date.now()
        if(curTime -prevTime >delay){
            fn.apply(this, arguments)
            prevTime = curTime
        }
    }
}
const throttleScroll=throttle(function({
    console.log('throttle')
}，1000)
window.onscroll=throttleScroll

防恶化 => 性能监控

前端性能优化