记录一次vuecli3后台管理系统webpack打包优化

·  阅读 167

一、优化点

  1. tree-shaking测试 webpack4以上默认配置 无须修改
  2. 开发环境下 速度测试(speed-measure-webpack-plugin)和打包分析(webpack-bundle- analyzer),预发布及正式环境须去除
  3. element ui 按需引入
  4. echarts 按需引入
  5. moment 按需引入 只引入zh-cn部分
  6. 去除jquery相关无用代码 及无用导出函数
  7. 添加thread-loader 启用多进程打包 加快打包速度
  8. 添加TerserWebpackPlugin 开启并行压缩js代码 去除正式环境下的console、debug
  9. 环境部署问题排查 项目配置修改 测试环境部署测试 最终定位到是环境问题
  10. edu-ops-front 项目 更新环境node版本从8.11.1到10.16.2
  11. 删除了部分废弃代码文件

结果:在不影响系统功能的情况下,测试环境下构建gzipped主包体积缩小了66.12%,正式环境下构建gzipped体积减少了18.37%,本地开发机器测试数据如下:

测试环境下:dist/index.js

sizegzipped
优化前32674.98kb6320.37kb
优化后6320.37kb2141.28kb

正式环境下:包含dist/js/chunk-vendors.js 、dist/js/index.js 、dist/css/chunk-vendors.css、dist/css/index.css

sizegzipped
优化前4757.82kb4024.82kb
优化后1434.74kb1171.19kb

二、记录点(踩坑点):

  1. 打包分析在jenkins环境下,是不可用的,构建完成后会启动http server,会导致部署成功,但是部署成功的状态一直卡住,无法回调,须在本地进行包构建分析,部署时去除分析、速度测试相关代码。

  2. jenkins环境配置 node 8.11.1 版本过低,采用TerserWebpackPlugin构建时,node8会对node_modules代码进行严格校验,发现terser-webpack-plugin v5.0.3依赖的p-limit源码中存在代码语法错误,导致node8部署失败。经过对环境node版本升级到v10.16.2后,问题解决。

  3. 打包时间和包体积这两点上的优化是需要权衡的,通过更多配置更多插件去压缩包体积会延长打包时间,减少大体积文件的构建时间最好的方法是使用cdn替换,压缩体积最好的方法是对包做好分类,再进行细节优化。

三、可加强点

  1. 部分大体积资源可通过配置用cdn来替换,通过网络请求加载来减少部署构建时间。——公司cdn是否有稳定源?
  2. 废弃文件定位 清理
  3. 本地资源清理
  4. 不同浏览器的兼容问题——动态引入polyfill
  5. 分包打包,减少单页面资源请求大小
分类:
前端
标签: