以后npm直接替换成cnpm使用。 在开始搭建前首先看一下我们能从本教程学习到什么. ※注：本文代码区域每行开头的 “+”表示新增，“-或者D”表示删除，“M”表示修改，“...”表示省略。 dist为最终编译出来的生产环境代码，src为开发环境代码。 调整 package.j…

1. 什么是webpack WebPack可以看做是模块打包机：它做的事情是，分析你的项目结构，找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言（Scss，TypeScript等），并将其打包为合适的格式以供浏览器使用。 2. webpack核心概念 En…

关于webpack dll的使用，我这里不做过多介绍，网上都有，一撸一大把，今天我要说的是在使用dll plugin过程中出现的一个包依赖问题，这个问题导致打出来的包会包含重复的代码。

为了提高React应用的启动速度、离线访问能力, 做到页面能离线启动、service worker能在后台默默更新本地缓存的页面、数据的版本，并且做到监控版本更新能力的靠谱性。 终极方案：采用serviceWorker的成熟方案workBox通过Webpack的workbox官…

Webpack热更新（ Hot Module Replacement，简称 HMR，后续均以 HMR 替代），无需完全刷新整个页面的同时，更新所有类型的模块，是 Webpack 提供的最有用的功能之一。 HMR 作为一个 Webpack 内置的功能，可以通过 --hot 或者 …

由于Webpack以及它的周边工具babel等更新过快，在当前的时间线来看，很多相关的文章已被版本所淘汰，已经不足以借鉴来搭建一个可以正常使用的环境，所以打算写来记录一下。 在写这篇文章的时候我会同步搭建本地环境，尽量避免有略过的细节部分。 熟悉初始化项目的亲可直接跳过。 安装…

前端性能优化已经过了刀耕火种的年代，现在更多的优化是从代码层面，其中重中之重的当然是 JS 的优化

webpack v4 开始新增了一个 sideEffects 特性，通过给 package.json 加入 sideEffects: false 声明该包模块是否包含 sideEffects(副作用)，从而可以为 tree-shaking 提供更大的优化空间。 基于我们对 fp…

1. 相同资源重复加载引用，浪费用户流量以及服务器成本； 2. 每个页面需要加载的资源太多，导致网页首页加载缓慢； 1. 相同资源只打包加载一次，减少网络传输流量，降低服务器压力； 2. 页面加载速度加快，提交用户体验； 1. 根据项目使用的技术栈，把所有页面都要使用到的基础库…