Vue + TypeScript 项目之性能优化
项目分析
项目打包分析工具: webpack-bundle-analyzer
vue-cli 3 安装:
npm intall webpack-bundle-analyzer -–save-dev
或 yarn add webpack-bundle-analyzer
vue.config.js 增加配置:
chainWebpack: (config) => {
/* 添加分析工具*/
if (process.env.NODE_ENV === 'production') {
if (process.env.npm_config_report) {
config
.plugin('webpack-bundle-analyzer')
.use(require('webpack-bundle-analyzer').BundleAnalyzerPlugin)
.end();
config.plugins.delete('prefetch')
}
}
}
安装完成后,运行
npm run analyz 或者 yarn run analyz
会在浏览器打开:http://127.0.0.1:8888,一个项目打包的情况图,便于直观地比较各个 bundle文件的大小
资源优化
图片优化
- 尽量把项目中使用到的图片资源压缩到最小(较为推荐的压缩工具:https://tinypng.com/)
- 使用雪碧图
- 使用 iconfont
路由懒加载
在 router.js文件中,项目开始使用的是静态引用方式:
import HelloWord from '@/components/HelloWorld'
routes:[ path: '/hello', name: 'HelloWorld', component: HelloWorld ]
后来改成了:
routes:[
path: '/hello',
name: 'HelloWorld',
component: () => import('./components/HelloWorld')
]
包优化
- 注意按需引用,项目中没用到的包,不要擅自引入,有些包占用的资源挺多的
- 如果引入的包比较大,而且使用的时候只是用了其中某一个或者是极少部分的功能,最好使用其他可行的方案取而代之(如:本次项目中,引入的 lodash 这个包,仅仅使用了其中的 _merge 这个方法,而且只用了一次,所以最后用原生写了个方法取而代之)
- 移动端页面调试工具:eruda,虽然在使用的时候可以做环境判断,到那时打包发布的时候 eruda 依然被打包进去了,导致打包后的 js 文件无端增加了好几百 k,发现之后果断在发布之前把它注释掉了。这样每次在发布之前都需要把 eruda 注释掉,很多时候会忘记,所以但是这只是一定程度上解决了当前问题,最后希望的结果是:引入 eruda 的代码在发布之前不需要注释,而且 eruda 不会被打包。目前还没有想到更好的解决方法
接口请求
async/await 的利用
以后写的文章也会更新在自己的公众号,而且公众号还有其他的干货,路过的同学可以支持下
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。