Vue + TypeScript 项目之性能优化

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 的利用

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