09月22日, 2014 119次
Vue 框架经过材料双向绑定和假造 DOM 本领，帮咱们处置了前者接洽中最脏最累的 DOM 操纵局部， 咱们不复须要去推敲如何样操纵 DOM 以及如何样最高效地操纵 DOM；但 Vue 名目中仍旧生存名目首屏优化、Webpack 编写翻译摆设优化等题目，以是咱们仍旧须要去关心 Vue 名目本能上面的优化，使名目有着更高效的本能、越发好的存户领会。
正文是作家经过本质项手段优化试验举行归纳而来，蓄意读者群读完正文，有确定的开辟推敲，进而对本人的名目举行优化起到扶助。正文实质分为以次三局部构成：
Vue 代码层面包车型的士优化；
webpack 摆设层面包车型的士优化；
普通的 Web 本领层面包车型的士优化。
一、代码层面包车型的士优化1.1、v-if 和 v-show 辨别运用场景
v-if 是 真实 的前提衬托，由于它会保护在更改正程中前提块内的事变监听器和子组件符合地被废弃和重修；也是惰性的：即使在初始衬托时前提为假，则什么也不做——直到前提第一次变为真时，才会发端衬托前提块。v-show 就无脑得多， 尽管初始前提是什么，元素老是会被衬托，而且不过无脑地鉴于 CSS 的 display 属性举行变动。以是，v-if 符合用来在运转时很少变革前提，不须要一再变动前提的场景；v-show 则符合用来须要超等一再变动前提的场景。
1.2、computed 和 watch 辨别运用场景computed： 是计划属性，依附其它属性值，而且 computed 的值有缓存，惟有它依附的属性值爆发变革，下一次获得 computed 的值时才会从新发端计划 computed 的值；watch： 再多的是「接洽」的效率，一致于某些材料的监听回调 ，历次监听的材料变革时城市实行回调举行反面操纵；运用场景：
当咱们须要举行数值计划，而且依附于其它材料时，大约运用 computed，由于该当运用 computed 的缓存个性，制止历次获得值时，都要从新发端计划；
当咱们须要在材料变革时实行异步或开支较大的操纵时，大约运用 watch，运用 watch 选项承诺咱们实行异步操纵 ( 考察一个 API )，制止咱们实行该操纵的频次，并在咱们获得最闭幕果前，树立中央状况。那些都是计划属性没辙做到的。
1.3、v-for 遍历确定为 item 增添 key，且制止同一功夫运用 v-if（1）v-for 遍历确定为 item 增添 key在列表材料举行遍历衬托时，须要为每一项 item 树立独一 key 值，简单 Vue.js 里面体制精确探求该条列表材料。当 state 革新时，新的状况值和旧的状况值比较，较快地定位到 diff 。（2）v-for 遍历制止同一功夫运用 v-ifv-for 比 v-if 第一功夫级高，即使每一次都须要遍历所有数组，将会涉及速率，更加是当之须要衬托很小一局部的功夫，必需状况下大约包办成 computed 属性。解说
不解说：
1.4、长列表本能优化Vue 会经过 Object.defineProperty 对材料举行威胁，来实行视图相应材料的变革，但是少许功夫咱们的组件不过简练的材料展现，不会有一切变革，咱们就不须要 Vue 来威胁咱们的材料，在超等多的材料展现的状况下，这不妨很明显的缩小组件初始化的功夫，那如何样遏止 Vue 威胁咱们的材料呢？该当经过 Object.freeze 本领来停止一个东西，只有被停止的东西就再也不该当被改写了。
1.5、事变的废弃Vue 组件废弃时，会全机动整理它与其它范例的贯穿，解绑它的十足训令及事变监听器，然而仅限于组件自己的事变。即使在 js 内运用 addEventListene 等本领是不会全机动废弃的，咱们须要在组件废弃时手动移除那些事变的监听，免得形成外存揭发，如：
1.6、图片资源懒加载对于图片过多的页面，为了加快页面加载速率，以是一泰半功夫咱们须要将页面内未出此刻可视地域内的图片先不做加载， 比及震动到可视地域后再去加载。如许对于页面加载本能上会有蛮大的普及，也普及了存户领会。咱们在名目中运用 Vue 的 vue-lazyload 插件：（1）安置插件
import VueLazyload from 'vue-lazyload'
（2）在进口文献 man.js 中引入并运用
import VueLazyload from 'vue-lazyload'
之后再 vue 市直接运用
Vue.use(VueLazyload)
大概增添本人设置树立选项
Vue.use(VueLazyload, {preLoad: 1.3,error: 'dist/error.png',loading: 'dist/loading.gif',attempt: 1})
（3）在 vue 文献中将 img 标签的 src 属性径直改为 v-lazy ，进而将图片展示本领变动为懒加载展示：
<img v-lazy=/static/img/1.png>
之上为 vue-lazyload 插件的无脑运用，即使要看插件的再多参数选项，该当察看 vue-lazyload 的 github 地方。
1.7、路由懒加载Vue 是单页面运用，大概会有很多的路由引入 ，如许运用 webpcak 打包后的文献很大，当加入首页时，加载的资源过多，页面会展示白屏的状况，倒霉于存户领会。即使咱们能把不一律路由对应的组件分隔成不一律的代码块，之后当路由被考察的功夫才加载对应的组件，如许就越发高效了。如许会大大普及首屏展示的速率，然而大概很多的的页面包车型的士速率就会降下来。路由懒加载：
const Foo = () => import('./Foo.vue')const router = new VueRouter({routes: [ { path: '/foo', component: Foo } ] })
1.8、第三方插件的按需引入咱们在名目中老是会须要引入第三方插件，即使咱们径直引入所有插件，会引导项手段体积太大，咱们该当借助 babel-plugin-component ，之后该当只引入须要的组件，以到达减小名目体积的手段。以次为名目中引入 element-ui 组件库为例：（1）开始，安置 babel-plugin-component ：
npm install babel-plugin-component -D
（2）之后，将 .babelrc 改写为：
{presets: [[es2015, { modules: false }]],plugins: [ [component, {libraryName: element-ui,styleLibraryName: theme-chalk } ] ]}
（3）在 main.js 中引入局部组件：
import Vue from 'vue';import { Button, Select } from 'element-ui'; Vue.use(Button) Vue.use(Select)
1.9、优化没有极限列表本能即使你的运用生存超等长大概没有极限震动的列表，那么须要采用 窗口化 的本领来优化本能，只有衬托少局部地域的实质，缩小从新发端衬托组件和创造 dom 节点的功夫。你该当参考以次开源名目 vue-virtual-scroll-list 和 vue-virtual-scroller 来优化这种没有极限列表的场景的。
1.10、效劳端衬托 SSR or 预衬托效劳端衬托是指 Vue 在软硬件将标签衬托成的所有 html 片断的事变在效劳端实行，效劳端产生的 html 片断径直归来给软硬件这种进程就叫作效劳端衬托。（1）效劳端衬托的便宜：
越发好的 SEO：由于 SPA 页面包车型的士实质是经过 Ajax 获得，而探求网址引擎爬取东西并不会等候 Ajax 异步实行后再抓取页面实质，以是在 SPA 中是抓取不到页面经过 Ajax 获获得的实质；而 SSR 是径直由效劳端归来仍旧衬托好的页面（材料仍旧包括在页面中），以是探求网址引擎爬取东西该当抓取衬托好的页面；
更快的实质达到功夫（首屏加载更快）：SPA 会等候十足 Vue 编写翻译后的 js 文献都安置实行后，才发端举行页面包车型的士衬托，文献安置等须要确定的功夫等，以是首屏衬托须要确定的功夫；SSR 径直由效劳端衬托好页面径直归来展示，不必等候安置 js 文献及再去衬托等，以是 SSR 有更快的实质达到功夫；
（2）效劳端衬托的缺陷：再多的接洽前提制止：比方效劳端衬托只扶助 beforCreate 和 created 两个钩子因变量，这会引导少许外部扩充库须要更加处置，本领在效劳端衬托运用运用步调中运转；而且与该当安置在一切静态文献效劳器上的完备静态单页面运用运用步调 SPA 不一律，效劳端衬托运用运用步调，须要居于 Node.js server 运转情况；
再多的效劳器负载：在 Node.js 中衬托完备的运用运用步调，明显会比只是供给静态文献的 server 越发超等多的占用cpu 资源，所以即使你预见在高流量情况下运用，请筹备对立应的效劳器负载，并聪明地采用缓存战略。
即使你的项手段 SEO 和 首屏衬托是评介项手段要害目标，那么你的名目就须要效劳端衬托来扶助你实行最佳的初始加载本能和 SEO，精细的 Vue SSR 如何样实行，该当参考作家的另一篇作品《Vue SSR 踩坑之路》。即使你的 Vue 名目只需革新较少量经营销售页面（比方 /， /about， /contact 等）的 SEO，那么你大概须要预衬托，在建立时 (build time) 无脑地天生对准特出路由的静态 HTML 文献。便宜是树立预衬托更无脑，并该当将你的前者动作一个完备静态的网址，精细你该当运用 prerender-spa-plugin 就该当轻快地增添预衬托 。
二、Webpack 层面包车型的士优化2.1、Webpack 对图片举行收缩在 vue 名目中除去该当在 webpack.base.conf.js 中 url-loader 中树立 limit 巨细来对图片处置，对小于 limit 的图片变化为 base64 方法，其他的不做操纵。以是对少许较大的图片资源，在乞求资源的功夫，加载会很慢，咱们该当用 image-webpack-loader来收缩图片：（1）开始，安置 image-webpack-loader ：
npm install image-webpack-loader --save-dev
（2）之后，在 webpack.base.conf.js 中举行摆设：
{test: /\.(png|jpe?g|gif|svg)(\?.*)?$/, use:[ { loader: 'url-loader', options: { limit: 10000, name: utils.assetsPath('img/[name].[hash:7].[ext]') } }, { loader: 'image-webpack-loader', options: { bypassOnDebug: true, } } ]}
2.2、缩小 ES6 转为 ES5 的冗余代码Babel 插件会在将
ES6
代码变换成 ES5 代码时会注入少许扶助因变量，比方底下的 ES6 代码：
class HelloWebpack extends Component{...}
这段代码再被变换成能平常运转的 ES5 代码时须要以次两个扶助因变量：
babel-runtime/helpers/createClass // 用来实行 class 语法babel-runtime/helpers/inherits // 用来实行 extends 语法
在默许状况下， Babel 会在每一个输入文献中内嵌那些依附的扶助因变量代码，即使多个源代码文献都依附那些扶助因变量，那么那些扶助因变量的代码将会展示很屡次，形成代码冗余。为了不让那些扶助因变量的代码反复展示，该当在依附它们时经过 require('babel-runtime/helpers/createClass') 的本领导出，如许就能做到只让它们展示一次。babel-plugin-transform-runtime 插件不过用来实行这种效率的，将相关扶助因变量举行包办成导出语句，进而减小 babel 编写翻译出去的代码的文献巨细。（1）开始，安置 babel-plugin-transform-runtime ：
npm install babel-plugin-transform-runtime --save-dev
（2）之后，改写 .babelrc 摆设文献为：
plugins: [transform-runtime]
即使要看插件的再多提防实质，该当察看babel-plugin-transform-runtime 的 提防解说。
2.3、索取大众代码即使名目中没有去将每一个页面包车型的士第三方库和大众模块索取出去，则名目会生存以次题目：
沟通的资源被反复加载，滥用存户的流量和效劳器的本钱。
每一个页面须要加载的资源太大，引导网页首屏加载渐渐，涉及存户领会。
以是咱们须要将多个页面包车型的士大众代码抽离成独立的文献，来优化之上题目 。Webpack 内置了特意用来索取多个Chunk 中的大众局部的插件 CommonsChunkPlugin，咱们在名目中 CommonsChunkPlugin 的摆设如次：
// 十足在 package.json 内里依附的包，城市被打包进 vendor.js 这种文献中。
new webpack.optimize.CommonsChunkPlugin( { name: 'vendor', minChunks: function(module, count) { return (module.resource &&/\.js$/.test(module.resource) &&module.resource.indexOf( path.join(__dirname, '../node_modules')) === 0 ); } }),// 抽掏出代码模块的映照联系new webpack.optimize.CommonsChunkPlugin({name: 'manifest',chunks: ['vendor']})
即使要看插件的再多提防实质，该当察看 CommonsChunkPlugin 的 提防解说。
2.4、沙盘摘编译当运用 DOM 内沙盘或 javaScript 内的字符串沙盘时，沙盘会在运转时被编写翻译为衬托因变量。常常普遍状况下这种进程仍旧充满快了，但对本能敏锐的运用仍旧最佳制止这种用法。摘编译沙盘最无脑的本领不过运用单文献组件——相关的建立树立会全机动把摘编译处置好，以是建立好的代码仍旧内含了编写翻译出去的衬托因变量而不是原始的沙盘字符串。即使你运用 webpack，而且景仰辨别 JavaScript 和沙盘文献，你该当运用 vue-template-loader，它也该当在建立进程中把沙盘文献变换形成 JavaScript 衬托因变量。
2.5、索取组件的 CSS当运用单文献组件时，组件内的 CSS 会以 style 标签的本领经过 JavaScript 动静注入。这有少许小小的运转时开支，即使你运用效劳端衬托，这会引导一段 “无款式实质闪耀 (fouc) ” 。将十足组件的 CSS 索取到同一个文献该当制止这种题目，也会让 CSS 更好地举行收缩平静存。查看这种建立东西各自的文书档案来领会再多：
webpack + vue-loader ( vue-cli 的 webpack 沙盘仍旧预先摆设好)
Browserify + vueify
Rollup + rollup-plugin-vue
2.6、优化 SourceMap咱们在名目举行打包后，会将接洽中的多个文献代码打包到一个文献中，而且体验过收缩、去掉过剩的空格、babel编写翻译化后，最后将编写翻译获得的代码会用来线上情况，那么如许处置后的代码和源代码会有蛮大的分辨，当有 bug的功夫，咱们就只能定位到收缩处置后的代码场所，没辙定位到接洽情况中的代码，对于接洽来说不好调式定位题目，所以 sourceMap 展示了，它不过为领会决不好调式代码题目的。SourceMap 的可选值如次（+ 号越多，代办速率越快，- 号越多，代办速率越慢, o 代办平淡速率 ）
消费情况解说：cheap-module-source-map因为如次：
cheap：源代码中的列动静是没有一切效率，所以咱们打包后的文献不蓄意包括列相关动静，惟有行动静能创造打包前后的依附联系。所以尽管是接洽情况或消费情况，咱们都蓄意增添 cheap 的普通类型来忽视打包前后的列动静；
module ：尽管是接洽情况仍旧正式情况，咱们都蓄意能定位到bug的源代码精细的场所，比方说某个 Vue 文献报错了，咱们蓄意能定位到精细的 Vue 文献，所以咱们也须要 module 摆设；
soure-map ：source-map 会为每一个打包后的模块天生独力的 soucemap 文献 ，所以咱们须要减少source-map 属性；
eval-source-map：eval 打包代码的速率超等快，由于它不天生 map 文献，然而该当对 eval 共同运用 eval-source-map 运用会将 map 文献以 DataURL 的情势生存打包后的 js 文献中。在正式情况中不要运用 eval-source-map, 由于它会减少文献的巨细，然而在接洽情况中，该当试用下，由于她们打包的速率很快。
2.7、建立截止输入领会Webpack 输入的代码可读性超等差并且文献超等大，让咱们超等头疼。为了更无脑、直觉地领会输入截止，社区中展示了超等多可视化领会东西。那些东西以图形的本领将截止更直觉地展现出去，让咱们赶快领会题目地方。接下来熏陶咱们在 Vue 名目顶用到的领会东西：webpack-bundle-analyzer 。咱们在名目中 webpack.prod.conf.js 举行摆设：
if (config.build.bundleAnalyzerReport) { var BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin; webpackConfig.plugins.push(new BundleAnalyzerPlugin());}
实行 $ npm run build --report 后天生领会截止汇报如次：
2.8、Vue 项手段编写翻译优化即使你的 Vue 名目运用 Webpack 编写翻译，须要你喝一杯咖啡茶的功夫，那么大概你须要对项手段 Webpack 摆设举行优化，普及 Webpack 的建立功效。精细如何样举行 Vue 项手段 Webpack 建立优化，该当参考作家的另一篇作品《
Vue 名目
Webpack 优化试验》
三、普通的 Web 本领优化3.1、打开 gzip 收缩gzip 是 GNUzip 的缩写，最先用来 UNIX 体例的文献收缩。HTTP 和议上的 gzip 源代码是一种用来矫正 web 运用运用步调本能的本领，web 效劳器和软硬件（欣赏器）确定专心鼎力扶助 gzip。暂时群众的欣赏器，Chrome，firefox，IE等都扶助该和议。罕见的效劳器如 Apache，Nginx，IIS 一律扶助，gzip 收缩功效超等高，常常普遍该当到达 70% 的收缩率，也不过说，即使你的网页有 30K，收缩之后就形成了 9K 差不离以次咱们以效劳端运用咱们熟习的 express 为例，打开 gzip 超等无脑，相关办法如次：
安置：npm install compression --save
增添代码论理：var compression = require('compression');var app = express();app.use(compression())
重启效劳，接洽搜集面板内里的 response header，即使观察到的如次红圈里的字段则表白 gzip 打开胜利 ：
3.2、欣赏器缓存为了普及存户加载页面包车型的士速率，对静态资源举行缓存是超等必需的，按照能否须要从新发端向效劳器倡导乞求来分门别类，将 HTTP 缓存玩法分为两大类（强力缓存，比较缓存），即使对缓存体制还不是领会很领会的，该当参考作家写的对于 HTTP 缓存的作品《深刻领会HTTP缓存体制及道理》，这边不复申诉。
3.3、CDN 的运用欣赏器从效劳器上安置
CSS
、js 和图片等文献时都要和效劳器贯穿，而一泰半效劳器的带宽有限，即使胜过制止，网页就半天反馈然而来。而 CDN 该当经过不一律的域名来加载文献，进而使安置文献的并发贯穿数大大的减少，且CDN 有着越发好的可用性，更低的搜集推迟和丢包率 。
3.4、运用 Chrome Performance 搜索本能瓶颈Chrome 的 Performance 面板该当录制一段功夫内的 js 实行详细及功夫。运用 Chrome 接洽者东西领会页面本能的办法如次。
翻开 Chrome 接洽者东西，变动到 Performance 面板
点一下 Record 发端录制
革新页面或打开某个节点
点一下 Stop 中断录制
归纳正文经过以次三局部构成：
Vue
代码层面包车型的士优化、webpack 摆设层面包车型的士优化、普通的 Web 本领层面包车型的士优化；来解说如何去优化 Vue 项手段本能。蓄意对读完正文的你有扶助、有开辟，即使有不及之处，欢送品评教正交谈！作家：我是你的超等豪杰https://juejin.im/post/5d548b83f265da03ab42471d