随着Babel、TypeScript、VueLoader、Terser等编译、转译技术的大规模使用，Webpack的编译时间正不断膨胀。为了优化编译速度，社区主要有两种方案： 这些方案在一定程度上解决了编译速度慢的问题，但随之而来的是成堆的配置，严重影响了Webpack的使用体…

前言 说起sourcemap，大家应该都不陌生，由于前端代码一般都需要编译和打包，出来的代码是非常难以阅读的，有了它能方便我们调试，快速定位到问题。 什么是sourcemap? sourcemap本质

本篇文章 耗时 7个小时左右才完工，篇幅涉及到大量的源码及其分析的过程图解和数据，阅读前，请保证自己有充分的时间，尽情的去享受吸收知识进入脑子的过程。

在单页应用中，经常使用 webpack 的 动态导入 功能来异步加载模块，从而减少部分文件的体积。我们可以通过webpack 提供的 import() 和 require.ensure 两个 API 来使用该功能。由于两个方法根本实现都是相同的，本文的示例都基于 import(…

webpack 打包优化并没有什么固定的模式，一般我们常见的优化就是拆包、分块、压缩等，并不是对每一个项目都适用，针对于特定项目，需要不断调试不断优化。 对于 webpack4，建议从零开始配置，在项目初期，使用 webpack4 默认的配置。 接下来，本篇文章会列出所有适用于…

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

本项目是淘系用户增长团队的一个大中台系统，单页应用，涵盖很多业务功能，运用了很多懒加载页面组件来提升性能，首屏时间 1s 左右，体验良好。然而大项目文件很多，导致构建和发布时间很长，内存占用较大。我的任务是尽可能优化与此相关的问题。 首先不难发现问题并不在用户体验上，而在于开发…

一种是页面刷新，不保留页面状态，就是简单粗暴，直接window.location.reload()。 另一种是基于WDS (Webpack-dev-server)的模块热替换，只需要局部刷新页面上发生变化的模块，同时可以保留当前的页面状态，比如复选框的选中状态、输入框的输入等。…

0. 背景 随着构建体系不断完善、构建体验不断优化，webpack 已经逐渐成为了前端构建体系的一大霸主，对于工作中的真正意义上的前端工程项目，webpack 已经成为了我们前端构建技术选型的不二选择，包括 create-react-app 以及 vue-cli 等等业内常见的…