webpack 优化

533 阅读1分钟

前提:打包分析

1.打包体积

使用webpack-bundle-analyzer插件能够分析出打包的每个依赖大小和输出文件占比。

2.打包速度

使用speed-measure-webpack-plugin,但是不支持与html的plugin共存

一、体积优化

1.js压缩

2.css压缩、去重

3.图片压缩

4.分chunk以及tree-shaking

5.外链cdn

6.组件按需加载

二、编译速度

1.区分开发环境生产环境配置

2.开启多线程编译

使用happypackloader

3.设置别名alias

通过设置别名减少文件查找次数

4.预先编译第三方资源(DLLPlugin)

5.开启缓存cache

6.缩小构建文件目标 excludeinclude

三、体验优化

1.开启热更新和前面提到的开启缓存

2.线上环境开启gzip。需要webpack打包编译gzip以及nginx支持

优点:减少请求的资源大小从而加快访问速度

缺点:

  1. 会消耗内存
  2. 网络速度快的情况下gzip收益不大