webapck 打包体积优化策略

一、概述

1、Tree-shaking

2、公共资源分离

3、图片压缩

4、css压缩

5、html压缩

6、externals

7、js压缩

二、Tree-shaking

Tree-shaking：1个模块可能有多个方法，只要其中的某个方法使用到了，则整个文件都会被打到bundle里面去，Tree-shaking就是只把用到的方法打入bundle，没用到的方法会在uglify阶段被擦除掉。

使用：webpack默认支持，在.babelrc里设置 modules: false即可

三、公共资源分离

目的：提取多页面公共JS chunk代码

方法：

（1）webpack3使用CommonsChunkPlugin

（2）webpack4使用SplitChunksPlugin

以下是webpack4示例：

四、图片压缩

方法：基于Node库的imagemin或者tinypng API；或者使用：配置image-webpack-loader

以下是使用image-webpack-loader示例：