webpack的打包优化一直是个老生常谈的话题，常规的无非就分块、拆包、压缩等。 本文以我自己的经验向大家分享如何通过一些分析工具、插件以及webpack新版本中的一些新特性来显著提升webpack的打包速度和改善包体积，学会分析打包的瓶颈以及问题所在。 webpack 有时候…

本篇文章讲述从零搭建React中后台项目框架模板，方便快速进行具体项目开发。包括Webpack5.0配置及打包优化、React全家桶使用（React + React-router + Axios + Mobx + Antd）、ESLint等项目开发规范等。 升级项目中全部依赖库…

代码分片可以让你把应用分成多个包，使你的用户能逐步加载应用而变得流行起来。在这篇文章中，我们将会看一下什么是代码分片和怎么去做，了解怎么去配合React Router去实现它。 现在是2018年。你的用户不需要为了一小块内容而去下载整个应用。如果一个用户下载所有的代码，仅仅是为…

项目中的 Route 使用了System.import(/* webpackChunkName: "example" */ './example.js)来实现模块的动态加载，也就是根据组件打包成多个 bundle，只有在点击到对应的 Route 时，这个 bundle 才会被加…

本文讲述怎么实现动态加载组件，并借此阐述适配器模式。 以上是最常见的React router。在简单的单页应用中，这样写是ok的。因为打包后的单一js文件bundle.js也不过200k左右，gzip之后，对加载性能并没有太大的影响。 但是，当产品经历多次迭代后，追加的页面导致…

本文主要介绍了利用splitChunk来分割第三方库的代码，详细介绍了chunks三个属性值的具体含义，推荐使用'all'。最后，利用cacheGroups来对单个库进行打包。

技术：好的，这就改。 这种方案，很快就被自我否定了。 这种方案，也思索了很久，后来也被否定了。 经过前面两个问题后，我发现思考的方向完全是错误的，总是妄想改变webpack的打包方式，简直就是跟它的理念对着干。 可以看到这一次生成的hash是4897.... 但是输出的每个文件…

webpack 把我们所有的文件都打包成一个 JS 文件，这样即使你是小项目，打包后的文件也会非常大。下面就来讲下如何从多个方面进行优化。

在之前的webpack学习内容中，介绍了使用webpage打包项目的基础构建，其中讲解了对js、css文件的压缩。这其实可以视为项目体积优化的一部分，下面针对体积优化进行进一步的学习。