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文件的大小


资源优化

图片优化

  1. 尽量把项目中使用到的图片资源压缩到最小(较为推荐的压缩工具:https://tinypng.com/
  2. 使用雪碧图
  3. 使用 iconfont

路由懒加载

在 router.js文件中,项目开始使用的是静态引用方式:

import HelloWord from '@/components/HelloWorld'
routes:[ path: '/hello', name: 'HelloWorld', component: HelloWorld ]

后来改成了:


routes:[ 
     path: '/hello',
     name: 'HelloWorld',
     component: () => import('./components/HelloWorld')
 ]

包优化

  1. 注意按需引用,项目中没用到的包,不要擅自引入,有些包占用的资源挺多的
  2. 如果引入的包比较大,而且使用的时候只是用了其中某一个或者是极少部分的功能,最好使用其他可行的方案取而代之(如:本次项目中,引入的 lodash 这个包,仅仅使用了其中的 _merge 这个方法,而且只用了一次,所以最后用原生写了个方法取而代之)
  3. 移动端页面调试工具:eruda,虽然在使用的时候可以做环境判断,到那时打包发布的时候 eruda 依然被打包进去了,导致打包后的 js 文件无端增加了好几百 k,发现之后果断在发布之前把它注释掉了。这样每次在发布之前都需要把 eruda 注释掉,很多时候会忘记,所以但是这只是一定程度上解决了当前问题,最后希望的结果是:引入 eruda 的代码在发布之前不需要注释,而且 eruda 不会被打包。目前还没有想到更好的解决方法

接口请求

async/await 的利用

以后写的文章也会更新在自己的公众号,而且公众号还有其他的干货,路过的同学可以支持下

qrcode.jpg


Evelyn
258 声望12 粉丝

一只野生媛媛