weixin_39357177的博客

这种效果几乎是看不见的，但在文件大小上有非常大的差别。在打包「生产环境」代码之前，执行「压缩命令」，通过命令行交互，选择需要压缩的图片。虽然可以通过「配置」的方式解决上述问题，但每次打包都要特殊配置，略显麻烦，这样看来plugin好像不是最好的选择。使用过TinyPNG的都知道，他的压缩效果很好，肉眼几乎看不出区别，图片不失真，是个不错的选择。选择第二种方案，可能有人会说，直接用webpack的图片压缩插件也行啊，但是有两个问题。，就会把全部文件名匹配的路径显示出来，通过空格键选择图片所在的目录。

（一）缩⼩⽂件范围 Loader使用include exclude配置项来缩⼩loader的处理范围，推荐使用include { test: /\.css$/, include: path.resolve(__dirname, "./src"), use: ['style-loader', 'css-loader'], },（二）优化resolve.modules配置resolve.modules⽤于配置webpack去哪些⽬录下寻找第三⽅模

（一）优化resolve.alias配置resolve.alias配置通过别名来将原导⼊路径映射成⼀个新的导⼊路径，减少查找过程resolve: { alias: { // 引入vue的时候，直接指向vue打包好之后的文件 // 比如import Vue from 'vue/dist/vue.common.js'--> import Vue from 'vue' vue$: "vue/dist/vue.esm.js", // 减少查找过程 起

前言单页面应用中，整个web项目只有一个页面，使用路由机制进行组件之间的切换，动态的渲染页面内容。这就是客户端渲染，具有数据传输量小、减少服务器端压力、交互/响应速度快、前后端完全分离等优点。单页应用在优化用户体验的同时，也给我们带来了一些问题，例如对SEO不友好，首屏时间过长等。因此，服务端渲染（SSR）和预渲染（Prerender）技术应运而生。服务端渲染与预渲染的优点SEO：单页应用的网站内容是根据当前路径动态渲染的，html 文件初始只有<div id="app></div

前言在2019年3月VueConf US 大会上 Vue开发核心团队成员 Guillaume Chau 发表了一个名为Vue性能优化9法的主题。演讲视频：http://www.youtube.com/watch?v=5B66qer8cZo演讲文稿：https://slides.com/akryum/vueconfus-2019#/演示网站：https://vue-9-perf-secrets.netlify.com演示代码：https://github.com/Akryum/vue-9-perf

路由懒加载的好处像vue这种单页面应用，用构建工具打包之后的包会非常大，导致网页白屏时间过长，影响用户体验，而运用懒加载则可以将页面进行划分，需要的时候加载页面，可以有效的分担首页所承担的加载压力，减少首页加载用时...

主要实现流程：先将img标签的src链接设为同一张图片（比如空白图片），然后给img标签设置自定义属性（比如 data-src）,然后将真正的图片地址存储在data-src中，当JS监听到该图片元素进入可视窗口时，将自定义属性中的地址存储到src属性中。达到懒加载的效果。现将img标签的src设置为同一张图片，减少http的请求数量，给img标签自定义属性，把真正的路径挡在自定义属性中（比...