vue的一些优化方式

• 优化无限列表性能

暂未了解

• 服务端渲染 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 代表中等速度 ）

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-UyT7liGC-1637477843551)(./images/1.png)]

开发环境推荐：cheap-module-eval-source-map

生产环境推荐：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, 因为它会增加文件的大小，但是在开发环境中，可以试用下，因为他们打包的速度很快。

😰构建结果输出分析

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 后生成分析报告如下：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-v93BiJMl-1637477843554)(./images/2.png)]

​ Vue 项目的编译优化

如果你的 Vue 项目使用 Webpack 编译，需要你喝一杯咖啡的时间，那么也许你需要对项目的 Webpack 配置进行优化，提高 Webpack 的构建效率。具体如何进行 Vue 项目的 Webpack 构建优化，暂未学习

[](()三、基础的 Web 技术优化

🤣开启 gzip 压缩

gzip 是 《大厂前端面试题解析+Web核心总结学习笔记+企业项目实战源码+最新高清讲解视频》无偿开源 徽信搜索公众号【编程进阶路】 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 开启成功 ：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-oOEAmyzu-1637477843556)(./images/3.png)]

🤣浏览器缓存