vue性能优化有哪些 vue性能优化总结( 四 ) _经验知识

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
【vue性能优化有哪些 vue性能优化总结】代码层面的优化、webpack 配置层面的优化、基础的 Web 技术层面的优化；来讲解怎么去优化 Vue 项目的性能。希望对读完本文的你有帮助、有启发。如果有不足之处。欢迎批评指正交流！作者：我是你的超级英雄https://juejin.im/post/5d548b83f265da03ab42471d