一、优化点
- tree-shaking测试 webpack4以上默认配置 无须修改
- 开发环境下 速度测试(speed-measure-webpack-plugin)和打包分析(webpack-bundle- analyzer)，预发布及正式环境须去除
- element ui 按需引入
- echarts 按需引入
- moment 按需引入 只引入zh-cn部分
- 去除jquery相关无用代码 及无用导出函数
- 添加thread-loader 启用多进程打包 加快打包速度
- 添加TerserWebpackPlugin 开启并行压缩js代码 去除正式环境下的console、debug
- 环境部署问题排查 项目配置修改 测试环境部署测试 最终定位到是环境问题
- edu-ops-front 项目 更新环境node版本从8.11.1到10.16.2
- 删除了部分废弃代码文件
结果：在不影响系统功能的情况下，测试环境下构建gzipped主包体积缩小了66.12%，正式环境下构建gzipped体积减少了18.37%，本地开发机器测试数据如下：
测试环境下：dist/index.js
| size | gzipped | |
|---|---|---|
| 优化前 | 32674.98kb | 6320.37kb |
| 优化后 | 6320.37kb | 2141.28kb |
正式环境下：包含dist/js/chunk-vendors.js 、dist/js/index.js 、dist/css/chunk-vendors.css、dist/css/index.css
| size | gzipped | |
|---|---|---|
| 优化前 | 4757.82kb | 4024.82kb |
| 优化后 | 1434.74kb | 1171.19kb |
二、记录点（踩坑点）：
-
打包分析在jenkins环境下，是不可用的，构建完成后会启动http server，会导致部署成功，但是部署成功的状态一直卡住，无法回调，须在本地进行包构建分析，部署时去除分析、速度测试相关代码。
-
jenkins环境配置 node 8.11.1 版本过低，采用TerserWebpackPlugin构建时，node8会对node_modules代码进行严格校验，发现terser-webpack-plugin v5.0.3依赖的p-limit源码中存在代码语法错误，导致node8部署失败。经过对环境node版本升级到v10.16.2后，问题解决。
-
打包时间和包体积这两点上的优化是需要权衡的，通过更多配置更多插件去压缩包体积会延长打包时间，减少大体积文件的构建时间最好的方法是使用cdn替换，压缩体积最好的方法是对包做好分类，再进行细节优化。
三、可加强点
- 部分大体积资源可通过配置用cdn来替换，通过网络请求加载来减少部署构建时间。——公司cdn是否有稳定源？
- 废弃文件定位 清理
- 本地资源清理
- 不同浏览器的兼容问题——动态引入polyfill
- 分包打包，减少单页面资源请求大小
