前端性能优化

代码层面优化

区分使用v-if和v-show

区分使用watch和computed

v-for必须设置key,避免同时使用v-if

长列表渲染优化 使用懒加载 或者vue-virtual-scroll-list

定时器或者监听事件的销毁

图片资源懒加载

路由懒加载

第三方插件按需引入

webpack层面优化-优化代码打包构建速度

配置externals 忽略打包 使用cdn

优化sourceMap 生产配置 source-map/hidden-source-map/nosources-source-map

开启babel缓存

webpack层面优化-优化运行性能

Code Split 代码分割

为什么？
打包的时候会打包进一个js文件，导致体积过大，加载时间长；
我们需要将打包生成的文件进行代码分割，生成多个 js 文件，渲染哪个页面就只加载某个 js 文件，这样加载的资源就少，速度就更快。

是什么
分割代码
按需加载

怎么做？
1、配置optimization
splitChunks配置项的chunk:‘all’
2、import(/webpackChunkName:‘test’/‘./test’) 返回一个promise
这是webpack动态导入模块命名的方式

tree shaking(摇树优化)

的本质是消除无用的js代码
1、在引入模块时就应该避免将全部引入，应该引入局部才可以触发tree shaking机制
2、只能使用export+import esm语法 不支持commonjs
3、对于没有导出的css模块 不使用