vue的一些优化方式

//安装插件

npm install vue-lazyload --save-dev

//在入口文件 man.js 中引入并使用

import VueLazyload from ‘vue-lazyload’

Vue.use(VueLazyload)

//或者添加自定义选项

Vue.use(VueLazyload, {

preLoad: 1.3,

error: ‘dist/error.png’,

loading: ‘dist/loading.gif’,

attempt: 1

})

//🤣在 vue 文件中将 img 标签的 src 属性直接改为 v-lazy ，从而将图片显示方式更改为懒加载显示：

• 路由懒加载

Vue 是单页面应用，可能会有很多的路由引入 ，这样使用 webpcak 打包后的文件很大，当进入首页时，加载的资源过多，页面会出现白屏的情况，不利于用户体验。如果我们能把不同路由对应的组件分割成不同的代码块，然后当路由被访问的时候才加载对应的组件，这样就更加高效了。这样会大大提高首屏显示的速度，但是可能其他的页面的速度就会降下来。

const Foo = () => import(‘./Foo.vue’)

const router = new VueRouter({

routes: [

{ path: ‘/foo’, component: Foo }

]

})

• 第三方插件的按需引入

我们在项目中经常会需要引入第三方插件，如果我们直接引入整个插件，会导致项目的体积太大，我们可以借助 babel-plugin-component ，然后可以只引入需要的组件，以达到减小项目体积的目的。以下为项目中引入 element-ui 组件库为例：

//首先，安装 babel-plugin-component ：

npm install babel-plugin-component -D

//然后，将 .babelrc 修改为：

{

“presets”: [[“es2015”, { “modules”: false }]],

“plugins”: [

[

“component”,

{

“libraryName”: “element-ui”,

“styleLibraryName”: “theme-chalk”

}

]

]

}

//在 main.js 中引入部分组件：

import Vue from ‘vue’;

import { Button, Select } from ‘element-ui’;

Vue.use(Button)

Vue.use(Select)

• 优化无限列表性能

暂未了解

• 服务端渲染 SSR or 预渲染

服务端渲染是指 Vue 在客户端将标签渲染成的整个 html 片段的工作在服务端完成，服务端形成的 html 片段直接返回给客户端这个过程就叫做服务端渲染。

二、Webpack 层面的优化

😰Webpack 对图片进行压缩

在 vue 项目中除了可以在 webpack.base.conf.js 中 url-loader 中设置 limit 大小来对图片处理，对小于 limit 的图片转化为 base64 格式，其余的不做操作。所以对有些较大的图片资源，在请求资源的时候，加载会很慢，我们可以用 image-webpack-loader来压缩图片：

//首先，安装 image-webpack-loader ：

npm install image-webpack-loader --save-dev

//然后，在 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,

}

}

]

}

😰减少 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 编译出来的代码的文件大小。

//首先，安装 babel-plugin-transform-runtime ：

npm install babel-plugin-transform-runtime --save-dev

//然后，修改 .babelrc 配置文件为：

“plugins”: [

“transform-runtime”

]

插件的更多详细内容，可以查看官网babel-plugin-transform-runtime 的 详细介绍

😰提取公共代码

如果项目中没有去将每个页面的第三方库和公共模块提取出来，则项目会存在以下问题：

• 相同的资源被重复加载，浪费用户的流量和服务器的成本。

• 每个页面需要加载的资源太大，导致网页首屏加载缓慢，影响用户体验。

所以我们需要将多个页面的公共代码抽离成单独的文件，来优化以上问题 。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 的 详细介绍

😰模板预编译

当使用 DOM 内模板或 JavaScript 内的字符串模板时，模板会在运行时被编译为渲染函数。通常情况下这个过程已经足够快了，但对性能敏感的应用还是最好避免这种用法。

预编译模板最简单的方式就是使用单文件组件——相关的构建设置会自动把预编译处理好，所以构建好的代码已经包含了编译出来的渲染函数而不是原始的模板字符串。

如果你使用 webpack，并且喜欢分离 JavaScript 和模板文件，你可以使用 vue-template-loader，它也可以在构建过程中把模板文件转换成为 JavaScript 渲染函数。

😰提取组件的 CSS

当使用单文件组件时，组件内的 CSS 会以 style 标签的方式通过 JavaScript 动态注入。这有一些小小的运行时开销，如果你使用服务端渲染，这会导致一段 “无样式内容闪烁 (fouc) ” 。将所有组件的 CSS 提取到同一个文件可以避免这个问题，也会让 CSS 更好地进行压缩和缓存。

查阅这个构建工具各自的文档来了解更多：

• webpack + vue-loader ( vue-cli 的 webpack 模板已经预先配置好)

• Browserify + vueify

• Rollup + rollup-plugin-vue

😰优化 SourceMap

我们在项目进行打包后，会将开发中的多个文件代码打包到一个文件中，并且经过压缩、去掉多余的空格、babel编译化后，最终将编译得到的代码会用于线上环境，那么这样处理后的代码和源代码会有很大的差别，当有 bug的时候，我们只能定位到压缩处理后的代码位置，无法定位到开发环境中的代码，对于开发来说不好调式定位问题，因此 sourceMap 出现了，它就是为了解决不好调式代码问题的。

SourceMap 的可选值如下（+ 号越多，代表速度越快，- 号越多，代表速度越慢, o 代表中等速度 ）

性能优化

1.webpack打包文件体积过大？（最终打包为一个js文件）

2.如何优化webpack构建的性能

3.移动端的性能优化

4.Vue的SPA 如何优化加载速度

5.移动端300ms延迟

6.页面的重构

所有的知识点都有详细的解答，我整理成了280页PDF《前端校招面试真题精编解析》。

加入社区》https://bbs.csdn.net/forums/4304bb5a486d4c3ab8389e65ecb71ac0