前几天在优化项目时，发现next.config.js的配置里，development 模式下的 sourcemap 为cheap-module-sourcemap，仔细想了想，记忆中好像有个更推荐常用的开发模式 sourcemap 配置：cheap-module-eval-so…

sourceMap对现在的项目来说也是比较重要的，因为在打包完成之后的代码是经过混淆、压缩的，不能很好的进行定位。如果想看到准确的代码位置，Source Maps（源映射） 通过提供原始代码和转换后代码之间的映射 来解决这个问题。 在2009年google的一篇文章中，在介绍C…

在这个内卷为王的时代，内卷文化已经渗透到工作和生活的方方面面。不在知识的海洋里翱翔，就会在知识的海洋里溺亡。作为一名新生代农民工，在智商与勤奋已经被工友大佬们双重碾压的同时，面对日新月异的搬砖(编程)

近来遇项目打包之事，撰文记之。以期分享，皆有所获。 基于这个两个前提，我们再进行下一步。 其中 analyzerMode 的设置比较重要。 得出如上图的分包并不难，vue-element-admin 自带这些配置。 如果你暂时还看不懂这些配置项，先别急，后面会一一陈述。 你只用…

先抛出一个尖锐问题：MPA 多页应用或微前端架构，如何处理页面的公共部分。 引入公共模板，这样在访问页面时会直接渲染公共部分。 但如果是现代化工程（比如 React），可前后端又未分离的MPA项目（页面仍由后端渲染，Dom 渲染交由 React 接管），我们就会将构建后的资源文…

create-react-app创建的应用默认是SPA的架子入口只有index.html。但是有些情况下我们确实需要在同一个工程下开发多个SPA项目，一个是2C的H5项目，一个是后台的管理项目。网上多页面的配置已经很多了，这里只是想扩展记录一些方法。 项目的架子是下面这样的。 …

如果我们在开发系统A时，能够按模块划分生成多份静态资源包，最终的成果物中，会有多个子目录，每个子目录可独立运行，完成一个业务功能。这样的话，我们有任何系统需要我们开发过的任何模块，都可以直接打包指定的模块，灵活组装。 这里跟原来的src下的main.js、index.html和…

cacheGrouops的作用就相当于是一个分组条件，满足这个条件输出为一个chunks。 可以看到输出的是dll为开头的chunk。 这里改变了test的条件，dll只考虑将路径含有react的输出为一个chunk。 可以看到输出了一个dll一个vendors，说明优先级只针…

1、将构建出来的一个代码块，分解成多个小块，方便加载。 2、将业务代码和第三方库的代码分离，这样增加新的业务的时候就不会影响到第三方库代码的内容，也不会影响到浏览器的缓存了。 在开发过程中可能经常会遇到业务变更的情况这个时候就需要将业务代码和第三方库的代码进行分离，保证我们部署…