Vue项目优化
- 1.移除控制台打印
- 2.压缩图片
- 3.CDN加速
1.移除控制台打印
可以使用插件自动去除,插件包括babel-plugin-transform-remove-console
、uglifyjs-webpack-plugin
、terser-webpack-plugin
。最后选择了terser-webpack-plugin
,脚手架vue-cli
用这个插件来开启缓存和多线程打包,无需安装额外的插件。最好还是养成良好的代码习惯,在开发基本完成后去掉无用的console,vscode中的turbo console就蛮好的。
2.压缩图片
尽量使用SVG
代替图片。根据机型和网络状况控制图片清晰度。对低清晰度图片使用锐化来提升体验。设计上避免大型背景图。或者可以使用yx-tiny
命令行工具进行图片压缩。
npm i yx-tiny -Dnpx tiny
根据命令行的提示一步一步完成压缩。
3.CDN加速
CDN
也称内容分发网络,其原理大概是将服务内容分发至全网加速节点,让用户从就近的服务器节点上获取内容,从而提高网站的访问速度,分担源站压力。