2024年Web前端最新webpack性能优化代码分割、公共代码提起篇，前端 MVP模式详解

本文链接：https://blog.csdn.net/2401_84413092/article/details/138476596

文末

js前端的重头戏，值得花大部分时间学习。

JavaScript知识

推荐通过书籍学习，《 JavaScript 高级程序设计（第 4 版）》你值得拥有。整本书内容质量都很高，尤其是前十章语言基础部分，建议多读几遍。

前端电子书

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

另外，大推一个网上教程现代 JavaScript 教程，文章深入浅出，很容易理解，上面的内容几乎都是重点，而且充分发挥了网上教程的时效性和资料链接。

学习资料在精不在多，二者结合，定能构建你的 JavaScript 知识体系。

面试本质也是考试，面试题就起到很好的考纲作用。想要取得优秀的面试成绩，刷面试题是必须的，除非你样样精通。

这是288页的前端面试题

288页面试题

异步加载的模块：通过import('xxx')或require(['xxx'],() =>{})加载的模块。
initial：提取同步加载和异步加载模块，如果xxx在项目中异步加载了，也同步加载了，那么xxx这个模块会被提取两次，分别打包到不同的文件中。
同步加载的模块：通过 import xxx或require('xxx')加载的模块。
all：不管异步加载还是同步加载的模块都提取出来，打包到一个文件中。
minSize选项：规定被提取的模块在压缩前的大小最小值，单位为字节，默认为30000，只有超过了30000字节才会被提取。
maxSize选项：把提取出来的模块打包生成的文件大小不能超过maxSize值，如果超过了，要对其进行分割并打包生成新的文件。单位为字节，默认为0，表示不限制大小。
minChunks选项：表示要被提取的模块最小被引用次数，引用次数超过或等于minChunks值，才能被提取。
maxAsyncRequests选项：最大的按需(异步)加载次数，默认为 6。
maxInitialRequests选项：打包后的入口文件加载时，还能同时加载js文件的数量（包括入口文件），默认为4。
先说一下优先级 maxInitialRequests / maxAsyncRequests <maxSize<minSize。
automaticNameDelimiter选项：打包生成的js文件名的分割符，默认为~。
name选项：打包生成js文件的名称。
cacheGroups选项，核心重点，配置提取模块的方案。里面每一项代表一个提取模块的方案。下面是cacheGroups每项中特有的选项，其余选项和外面一致，若cacheGroups每项中有，就按配置的，没有就使用外面配置的。
test选项：用来匹配要提取的模块的资源路径或名称。值是正则或函数。
priority选项：方案的优先级，值越大表示提取模块时优先采用此方案。默认值为0。
reuseExistingChunk选项：true/false。为true时，如果当前要提取的模块，在已经在打包生成的_js_文件中存在，则将重用该模块，而不是把当前要提取的模块打包生成新的_js_文件。
enforce选项：true/false。为true时，忽略minSize，minChunks，maxAsyncRequests和maxInitialRequests外面选项