webpack打包优化js大小

本文章仅提供解决问题的一个方向和遇到的坑更多具体的还需要自身不断去摸索.

---

前言

自己搭建了一个webpack+react+typescript打包的脚手架,使用antd来实现UI,build完后出现了一行WARNING

WARNING in entrypoint size limit: The following entrypoint(s) combined asset size exceeds the recommended limit (244 KiB). This can impact web performance.
Entrypoints:
  index (4.55 MiB)
      index.js

就是一个特别简单的页面打完包之后竟然有4.55M这么大，于是就想着做一些优化。

---

以下是优化的调整

一、JS拆分

首先想到的肯定是去官方文档上找一找解决方案。
官方描述文档上首先说到的是minimize,因为之前已经配置过UglifyJsPlugin所以这一块就不用再做配置了，但是在后续打包过程中发现UglifyJsPlugin不支持ES6所以替换为TerserPlugin。
再往下看文档就是splitChunks和runtimeChunk这个就是我们需要的了，在此之前可能需要先了解Chunk、module和bundle等概念这里就不展开描述了。在webpack.config加入对应的配置(此处只做了简单配置，SplitChunksPlugin还得提供了很多丰富的配置来达到我们想要的效果，详细的配置信息及使用方法请参照官方文档),然后build看一下具体的效果.

optimization:{
   
        splitChunks: {
   
            chunks: 'all',
            name: false,
        },
        runtimeChunk: {
   
            name: entrypoint => `runtime-${
     entrypoint.name}`,
        }