2048
登录
没  有  难  学  的  前  端
登 录
×
<返回上一级

Vue构建速度慢优化,性能优化方法

vue前端作者:东邪

1. 原因:vue-cli npm run build 命令打包时默认会生成 相对应的map文件,
从而导致打包后的整个 static文件夹 过大,导致构建速度慢,dist 文件过大,达到70M
解决方案:将map文件干掉,当然这个干掉不是手动删除,而是在webpack打包时不产生map文件。
在项目 根目录 config/index.js 中 build 内找到 productionSourceMap: true, 
把 true改为false。从而重新打包以后,系统就不会自动生成 map文件了。



2.原因:vue-cli npm run build 命令打包时 压缩优化不彻底。
这里 webpack其实自带有一个优化打包的方法(Gzip 文件压缩),
只是 vue-cli 默认没有使用
解决方案: compression-webpack-plugin非常好用的压缩插件,适用于vue-cli版本2以上
安装compression-webpack-plugin开发依赖插件 注意此时npm run build
会出现报错,这是由于版本问题,在项目package.json里将"compression-webpack-plugin": "^2.0.0",
降版本 "compression-webpack-plugin": "^1.1.12",
npm run build 执行后会发现js文件夹内每个js文件都有一个相对应的gz后缀文件,而且gz文件比相对应的js文件小很多。
浏览器如果支持 g-zip 会自动查找有没有gz文件,找到了就直接加载gz文件然后本地解压并执行。
经过操作,发现dist文件减少到16.9M,构建速度较少到2分钟以内。



webpack --profile --json > stats.json

ios 系统
// 实际执行的
windows 系统
node_modules/.bin/webpack --config ./build/webpack.dev.conf.js --profile --json > stats.json
```

将输出的json文件到如下两个网站进行分析

https://github.com/webpack/analyse

http://alexkuz.github.io/webpack-chart/

希望对大家有帮助哦。

« 上一篇:iscroll插件在Android和IOS点击失效和点击两次有效解决办法
» 下一篇:快应用实战之(小说阅读页)
评论
点击刷新
评论
相关博文
×添加代码片段