记一次 webpack 构建时间优化

Posted 2020-12-17 simplify the life

day 0 【项目概况】（2020-07-16）

项目打包实在太慢了，打算长期优化一下。目前的打包时间（npm run build）约 60s（启动开发环境 npm run dev 也需要将近 50s），这个数据并不固定，快的时候可能达到 55s，慢的时候可能接近 70s

先介绍下项目，是个很普通的 vue 单页应用，年代比较久远，用的是 vue-cli2 脚手架，做了部分修改（根据备注是当时不修改打包报错），并没有刻意配置其他的优化项。看了下打包结果，100 多个文件（不包括 sourcemap 文件），项目的路由比较多，而且基本都是路由懒加载，所以打包出来的文件较多

其中有几个文件比较大：

vender.js 和 app.js 看起来是公共文件，app.css 是项目唯一的 css。而另外几个，猜测是路由懒加载打包的文件，但是为啥会这么大？留待分析

此次优化，主要是优化 构建时间，同时也会对项目进行代码上的优化

day 1 【项目依赖项整理】（2020-07-17）

项目打包用的是 webpack3，对于优化的第一个想法是升级到 webpack4（webpack5 beta 已经好久了 ...），不管有没有用，用新不用旧。升级 webpack 意味着不少 loader 和插件都得同步升级，于是我看了下 package.json 文件，发现非常乱，不少没在项目中的依赖也出现在文件中，而且开发依赖和生产依赖混着来了

经过整理，删除了以下依赖项：

• awe-dnd（未使用，看起来是在 vue 中做拖拽的，两年没更新了，周下载也就 1500）
• browser-sync（之前用了 gulp 脚本，现在未使用，同时删除了 gulpfile.js）
• crypto（未使用）
• font-awesome（未使用）
• js-yaml（未使用）
• gulp / gulp-autoprefixer / gulp-load-plugins / gulp-notify / gulp-plumber / gulp-sass （没必要再使用 gulp，而且实际上也没在使用了）
• vue-easytable（未使用）
• videojs-contrib-hls（未使用）
• v-distpicker（不再使用）
• vue-quill-editor（未使用）
• vue-summernote（项目中使用的富文本编辑器，但是是整个文件夹复制过来的，所以没有使用 node_modules 里的）

生产依赖中有几个存疑项：

• mint-ui （并没有使用，好像是打入的第三方包使用了，那这个依赖不应该配置在第三方包中吗？）
• ali-oss（啥玩意，到底有么有用呢）

几个待优化项：（都是从代码优化角度，对于构建速度也有提升，但是应该提升不大）

• bootstrap
• jquery
• mint-ui
• moment
• summernote / codemirror
• ali-oss
• merge（干嘛的？）
• vue-resource

day 2（2020-07-21）

决定干掉生产环境的 sourcemap，我不知道这是不是一个正确的选择，但是我觉得在目前情况下是个相对正确的选择。目前我们有四套环境，除了本地的 development 外，还有 test/beta/ga 三个环境供测试使用，而这三个环境都是 production mode 的，原则上会进行代码压缩等操作，目前也对此配置了 sourcemap，而且 .map 文件随着生产文件一起发到线上了，所以在 chrome 的 Sources 面板其实是可以看到项目源代码的 ... 而对于线上的 sourcemap，我们并没有应用它，所以我简单粗暴地先把他们给去掉了。我觉得正确的姿势是生成 sourcemap 文件，但是不应该发到线上，在 ci 脚本中统一处理掉，当线上出错时，在另一个环境启动带 sourcemap 的服务

去除 sourcemap 生成后，来到 50s 左右（数据有浮动，多次测试，有几次来到了 45s 左右）