vuejs项目性能优化 - 总结篇

首页等页面加载慢？打包编译后css/js文件过大？试试压缩、路由懒加载等技术

打包编译后，过大的文件如：app.css、app.js、vendor.js

---

本着 “开发环境”、“测试环境”、“生产环境”，从以下几点入手：

一、图片压缩

（用PS压缩图片到最合适的大小）

二、 打包后app.css文件有1.22M 这个怎么优化？

vue-cli打包后 app.css体积过大，请问这个可以怎么解决？

三、app.js也很大了, 有没有使用组件异步加载？

如果有多用使用scoped样式, build配置里面allChunks关掉, 禁止合并到app.css （位置代码如下所示）

```
// 文件位置：（如上图）

new ExtractTextPlugin({
  ...
  // Setting the following option to `false` will not extract CSS from codesplit chunks.
  // Their CSS will instead be inserted dynamically with style-loader when the codesplit chunk has been loaded by webpack.
  allChunks: false,
})

```
>但是自我感觉这个效果好像作用不大。

四、屏蔽sourceMap

相关博客：“vuejs项目性能优化总结”

五、 路由懒加载

1. 引用官方来解说：当打包构建应用时，JavaScript 包会变得非常大，影响页面加载。

2. 如果我们能把不同路由对应的组件分割成不同的代码块，然后当路由被访问的时候才加载对应组件，这样就更加高效了。

3. 结合 Vue 的异步组件和 Webpack 的代码分割功能，轻松实现路由组件的懒加载。

4. 查看官网：“Vue Router 路由懒加载”

5. 优化前、优化后 · 效果图对比： 请仔细查看文件对比
   

优化之后可以看到加载的一部份文件都是被拆分后的小文件。
而且你点击别的页面的时候，会加载出现新的文件（如新页面的banner、background图片，等等）。

---

基本的性能优化暂时就总结到这里，如果你有更好的方法，欢迎一起分享探讨。

---

以上就是关于“ vuejs项目性能优化 - 总结篇 ” 的全部内容。