记一次 webpack 优化
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 左右)