在进行多页面开发的时候，项目刚开始阶段，页面较少，编译速度还能忍受，但是一旦页面增加，多次热更新就造成了内存溢出。 可以看到的是webpack把所有的页面都进行了编译，总体积已经达到了18M，耗时超过1分钟，在热更新的时候这个体积会变得更大，从而占据node的运行内存，导致内存…

webpack ensure 有人称它为异步加载，也有人称为代码切割，他其实就是将 js 模块给独立导出一个.js 文件，然后使用这个模块的时候，再创建一个 script 对象，加入到 document.head 对象中，浏览器会自动帮我们发起请求，去请求这个 js 文件，然后…

配置好之后，运行命令，就会在根目录生成一个stats.json文件，可以查看分析结果。这种方式只是初级分析，颗粒度较大。 配置好之后，运行打包命令的时候就可以看到每个loader 和插件执行耗时。 构建完成后，会在http://127.0.0.1:8888展示相关文件大小。按照…

在前一篇文章中，基础 webpack 环境已经搭建起来了，可以愉快地在上面写代码了。 但还不够，以上配置只是一个最基础的配置。我们还想要做一些优化方面的配置。优化有两个方面： 接下来，就来看看对应的配置是怎样的吧。（文末会有对应配置的完整代码文件） 在调试过程中，为了体验更好，…

例如这样就可以直接使用React的压缩版本，每次构建时不必再次解析。还可以通过别名引用文件，而不必再打长长的引用路径： 但这样的缺点是会无法使用Tree-Shaking，所以一般对React这种整体性比较强的库使用比较好，而像lodash这样的工具库还是使用Tree-Shaki…

性能优化的路没有穷尽，只有更快。打开页面越快越好，点击响应越快越好。在当今这个以快为主的时代，快才是王道。闲话扯完，说正事！！！ 该优化方案以最近做的一个hybrid webapp为实例演示。 （1）vue-router文件中的router使用懒加载方式。如下图所示 所有现代浏…

问题：我们会发现每次修改源目录文件的内容时整体页面都会被刷新，页面会被重新加载，如果我们的页面含有之前填写过的表单信息，然后我们又去改动了源目录某个文件的内容，按下CTRL+S保存后我们会发现之前填写过的表单数据因为整体页面的reload被清空了，这种情况往往不是我们想要的效果…

前几天 webpack 作者 Tobias Koppers 发布了一篇新的文章 webpack 4.0 to 4.16: Did you know?(需翻墙)，总结了一下webpack 4发布以来，做了哪些调整和优化。 并且说自己正在着手开发 webpack 5。 正好我也在使…

对开发者而言，我们希望webpack这个工具可以给我们带来流畅的开发体验。比如，当不断修改代码时，我们希望代码的变更能及时的通知浏览器刷新页面，而不是手动去刷新页面。更进一步的我们希望，代码的修改只会局部更换某个模块，而不是整个页面的刷新。这样可以使我们不需要在等待刷新中浪费很…