webpack可视化打包分析以及实践

webpack-bundle-analyzer简介

webpack-bundle-analyzer是一款基于webpack的可视化打包工具，通过配置可以在开发以及生产环境看到项目中引入的各模块的体积大小,方便开发者自定义的去优化包的大小。

引入方式

安装webpack-bundle-analyzer

npm install webpack-bundle-analyzer

直接使用npm或者cnpm 安装保存至package.json,如果只是为了本地测试不需要加上--save --dev,同时分析工具也可以在webpack配置文件里面手动开启。

安装成功之后，在package.json里面配置analyse的npm命令关联入口。

"scripts": {"start": "cross-env NODE_ENV=dev webpack-dev-server --devtool eval --progress --colors --hot --content-base","build": "cross-env NODE_ENV=prod node ./webpack.config.js","analyze": "cross-env NODE_ENV=production npm_config_report=true npm run build"},

然后在webpack中进行配置开发或者生产模式的打包分析;

const BundleAnalyzerPlugin =require('webpack-bundle-analyzer').BundleAnalyzerPlugin;

//dev or prod 都需要配置
entry:{},
output:{},
resolve:{},
module:{},
plugins:[
  //.../
     new BundleAnalyzerPlugin({
      analyzerMode: 'static',
      analyzerPort: 8091, // 运行后的端口号 可以修改
      generateStatsFile: true,
      statsOptions: { source: false }
      })
]

bundleAnalyzer配置细节
最后直接根据配置的环境运行对应的命令，如果配置开发环境即普通的run dev , 生产环境 run build

image-20201029095254072.png

是各个模块的打包后体积，可见各个模块初始化的打包体积以及Gzipped压缩后的大小。后续会使用该功能进行优化后的项目资源大小比较。

iconfont优化实践

解决思路

由于项目历史包含的需求比较多，在图标使用方面缺少统一的规范。最早项目使用iconfont中的font-class进行引入。后废弃使用传统的png格式进行图标的替换，导致项目中icon图标资源占用过大，项目包的体积也有所增加。本次优化从两方面入手，其一使用iconfont替换所有png格式的图标，再使用iconfont的新引入方式symbol进行图标库的引入。

具体优化实现

通过UI配合将项目后来使用的icon重制为svg格式并上传至iconfont网站

下载静态资源并替换src/iconfont目录下的所有资源文件

由于项目icon均带有颜色，现更改引入方式为symbol引入可以展示多色，节约前端重复定义颜色的工作量

需要注意的是vue项目中需要在main.js中手动引入iconfont.js以及iconfont.css。

如果想要使用cdn也可以在iconfont项目面板中index.html直接引入cdn的js。

然后在页面index.vue中按照官方的规范进行使用即可。

这种方法同时也兼容icon-class，已经使用的可以不需要替换。

最后比较一下项目引入iconfont替换静态资源前后index.vue页面静态资源的加载。

优化前后比较

图片1.png 图片2.png

静态资源的打包后体积从71Kb降到了12kb，效果显著。

同时更新了iconfont引入，今后只需要下载iconfont静态资源替换目录文件即可。

未来使用规范

1.更新的icon直接从iconfont下载替换，避免出现使用image代替icon使用。

2.webpack-bundle-analyse的配置仅供本地测试，否则每次打包或者运行均会出现同步的分析文件。