2024年Web前端最全Webpack5随笔，我了解到的面试的一些小内幕

性能优化

1.webpack打包文件体积过大？（最终打包为一个js文件）

2.如何优化webpack构建的性能

3.移动端的性能优化

4.Vue的SPA 如何优化加载速度

5.移动端300ms延迟

6.页面的重构

所有的知识点都有详细的解答，我整理成了280页PDF《前端校招面试真题精编解析》。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

出口入口

---

entry

entry:‘./src/main.js’

output

const path = require(‘path’)

output:{

path:path.resolve(__dirname,“./build”),

filename:‘js/bundle.js’

}

打包单文件

---

vue-loader@next

@vue/compiler-sfc

const { VueLoaderPlugin } = require(‘vue-loader/dist/index’)

两个标识

---

设置options api ：

new DefinPlugin(

{

VUE_OPTIONS_API:true,

VUE_PROD_DEVTOOLS:false

}

)

webpack-dev-server

---

将bundle文件保存到了内存里

事实上使用了一个库memfs（memory-fs webpack自己写的）

HMR热模加载

target:‘web’,

dvServer:{

contentBase:‘./public’,

hot:true，

host:‘0.0.0.0’,//可以让别的电脑看到自己电脑

port:‘7777’,

open:true,

compress:true,//gzip格式压缩 – Content-Encoding:gzip

proxy:{

secure:false,

changeOrigin:true

}

}

if(module.hot){

module.hot.accept(‘./js/element.js’,()=>{

console.log(‘element模板热更新了’)

})

}

解决方案：

vue-loader

react-refresh (react-hot-loader已经被弃用了)

原理：

WDS创建两个服务：提供静态资源的服务express和socket服务

historyApiFallback

---

resolve

---

基于enhence-resolve来解析文件路径

resolve:{

modules:[‘node_modules’]，

extensions:[‘.js’,‘.json’],

alias:{

‘@’:path.resolve(__dirname,“./src”)

}

}

总结

• 框架原理真的深入某一部分具体的代码和实现方式时，要多注意到细节，不要只能写出一个框架。

• 算法方面很薄弱的，最好多刷一刷，不然影响你的工资和成功率😯

• 在投递简历之前，最好通过各种渠道找到公司内部的人，先提前了解业务，也可以帮助后期优秀 offer 的决策。

• 要勇于说不，对于某些 offer 待遇不满意、业务不喜欢，应该相信自己，不要因为当下没有更好的 offer 而投降，一份工作短则一年长则 N 年，为了幸福生活要慎重选择！！！

  开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

喜欢这篇文章文章的小伙伴们点赞+转发支持，你们的支持是我最大的动力！