插件按需加载
路由懒加载
{
// 话题
path: '/topic',
name: 'topic',
component: () => import('@/views/hashtag/topic.vue'),路由懒加载
}
不生成map文件 设置productionsourcemap false
打包时不打包 vue、vuex、vue-router、axios 等，换用国内的
bootcdn 直接引入到根目录的 index.html 中。
图片懒加载 vue-lazyload
轮播 vue-awesome-swiper
四、使用字体图标代替切图
字体图标的优势:
（1）字体图标任意缩放不会失真
（2）在项目中导入后，以css样式引用，相较于传统的图片大大减少请求数量，优化性能
（3）修改方便，如需要切换主题色可由css控制，避免视觉反复切图的工作量
五、使用雪碧图
雪碧图的优点:
将多张图片合并到一张图片中，可以减小图片的总大小。
将多张图片合并成一张图片后，下载全部所需的资源，只需一次请求。可以减小建立连接的消耗。
六、提取公共样式和方法
1.复用的样式应当提取到公共的样式表中复用
2.公共的方法应当提取到公共的js中复用
3.表单验证的提取
1.2、computed 和 watch 区分使用场景
computed： 是计算属性，依赖其它属性值，并且 computed 的值有缓存，只有它依赖的属性值发生改变，下一次获取 computed 的值时才会重新计算 computed 的值；
watch： 更多的是「观察」的作用，类似于某些数据的监听回调 ，每当监听的数据变化时都会执行回调进行后续操作；
运用场景：
当我们需要进行数值计算，并且依赖于其它数据时，应该使用 computed，因为可以利用 computed 的缓存特性，避免每次获取值时，都要重新计算；
当我们需要在数据变化时执行异步或开销较大的操作时，应该使用 watch，使用 watch 选项允许我们执行异步操作 ( 访问一个 API )，限制我们执行该操作的频率，并在我们得到最终结果前，设置中间状态。这些都是计算属性无法做到的。
v-for 遍历必须为 item 添加 key，且避免同时使用 v-if
可视化 查看文件大小 webpack-bundle-analyzer
speed-measure-webpack-plugin：测量出在构建过程中，每一个 Loader 和 Plugin 的执行时长。
compression-webpack-plugin
解决后dist文件还大怎么办，使用gzip，gzip压缩是一种http请求优化方式，通过减少文件体积来提高加载速度。html、js、css文件甚至json数据都可以用它压缩，可以减小60%以上的体积。
-
JS 压缩：UglifyJSPlugin
-
HTML 压缩：HtmlWebpackPlugin
-
提取公共资源：splitChunks.cacheGroups
-
CSS 压缩：MiniCssExtractPlugin