代码层面优化
区分使用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模块 不使用