Vue+TypeScript项目性能优化项目分析项目打包分析工具：webpack-bundle-analyzervue-cli3安装：npmintallwebpack-bundle-analyzer---save-devoryarnaddwebpack-bundle-analyzervue.config.js添加配置：chainWebpack:(config)=>{/*添加分析工具*/if(process.env.NODE_ENV==='production'){if(process.env.npm_config_report){配置.plugin('webpack-bundle-analyzer').use(require('webpack-bundle-analyzer').BundleAnalyzerPlugin).end();config.plugins.delete('prefetch')}}}安装完成后，在浏览器中运行npmrunanalyz或yarnrunanalyz会打开：http://127.0.0.1:8888，工程打包图片，其中方便直观比较每个bundle文件的大小。资源优化图片优化项目中尽量使用图片资源压缩到最小（比较推荐的压缩工具：https://tinypng.com/），sprite图片使用iconfont路由router.js文件中的延迟加载。项目开始使用静态引用方式：importHelloWordfrom'@/components/HelloWorld'routes:[path:'/hello',name:'HelloWorld',component:HelloWorld]后来改为：routes:[path:'/你好'，名称：'HelloWorld'，component:()=>import('./components/HelloWorld')]包优化注意按需引用。请勿擅自导入项目中未使用的包。有些包会占用很多资源。如果引入的包比较大，使用的时候只用到一个或者很小一部分的功能，最好改用其他可行的方案（例如：本项目引入的lodash包只使用了_merge方法，而且只用过一次，所以最后写了一个native方法来代替）移动端页面调试工具：eruda，虽然在使用的时候可以进行环境判断，但是eruda在打包发布的时候还是会被打包，导致了打包后的js文件无缘无故增加了几百k。我发现后果断注释掉再发表，所以每次发表前都需要注释掉eruda，而且经常忘记，所以这只是一定程度上的解决办法。解决目前的问题，最终想要的结果是：引入eruda的代码在release之前不需要注释，eruda也不会被打包。目前，我还没有想到更好的解决方案。接口请求使用async/await。以后写的文章会更新在自己的公众号，公众号还有其他干货。路过的同学可以支持一下
