Vue项目优化

1、路由懒加载
2、图片懒加载
3、图片压缩 小于10K的压缩成base64位的 减少Http请求
4、JS 压缩
5、CSS 压缩
6、使用Gzip
7、按模块分域名 css.xxx.com | js.xxx.com | img.xxx.com
8、第三方代码使用CDN加载 例如 vue.min.js element-ui.min.js element-ui.min.css
9、使用 loading 和 骨架屏
10、使用服务端渲染或者预渲染
11、使用http2 使用时做个兼容
12、域名预解析

代码优化

1、防抖节流
2、v-if 和 v-show 区分使用 优先使用v-if
3、v-for 添加key
4、组件功能单一化
5、v-lazy 图片懒加载
6、组件销毁前 销毁自定义事件和定时器
7、优化无限列表 vue-virtual-scroller

Webpack 打包配置和优化

1、缩小依赖查找范围['node_module']
2、缩小依赖查找后缀['.js', '.json']
3、使用多进程编译插件 happypack -> thread-loader
4、使用多进程压缩插件 paralleUglifyPlugin
5、提取公共代码 commonsChunkPlugin
6、去除无用js代码 tree-shaking
7、去除没有用到的Css purgecss-webpack-plugin
8、使用gzip插件 compissionWebpackPlugin
9、定义公共变量 definePlugin
10、区分 开发、测试、生产环境
11、开发和测试环境 生成soucemap文件
12、生产环境不打包第三方代码 extenals
13、html-webpack-plugin 生成多模块文件并重命名（在router文件中配置名称）