Vue的性能优化

首屏加载过慢优化：

分析工具贴一波：

vuecli 2.x自带了分析工具，只要运行 npm run build --report
如果是 vuecli 3的话，先安装插件
cnpm intall webpack-bundle-analyzer –save-dev
然后在 vue.config.js中对 webpack进行配置
再运行 npm run build --report
会在浏览器打开一个项目打包的情况图，便于直观地比较各个 bundle文件的大小

1、路由的问题，简单带过

import ShowBlogs from '@/components/ShowBlogs'routes:[ path: 'Blogs', name: 'ShowBlogs', component: ShowBlogs ]
改成
routes:[ path: 'Blogs',name: 'ShowBlogs',component: () => import('./components/ShowBlogs.vue')

2、vue-cli3中在build的时候是默认添加预加载的

开启 prefetch(预先加载模块)，提前获取用户未来可能会访问的内容
在首屏会把这十几个路由文件，都一口气下载了
所以我们要关闭这个功能，在 vue.config.js中设置
参考官网的做法：

3、首屏需要加载的依赖包，其中 element-ui变成按需加载

import { Button, Input, Pagination, Table, TableColumn, MessageBox } from 'element-ui';Vue.use(Button)Vue.use(Input)Vue.use(Pagi

4、拆包，把公共的提取出来（减少体积）

5、拆完包之后，我们再用 gzip做一下压缩

安装 compression-webpack-plugin
在 vue.congig.js中引入并修改 webpack配置
const CompressionPlugin = require(‘compression-webpack-plugin’)configureWebpack: (config) => { if (process.env.NOD
在服务器我们也要做相应的配置
如果发送请求的浏览器支持 gzip，就发送给它 gzip格式的文件
我的服务器是用 express框架搭建的
只要安装一下 compression就能使用

const compression = require(‘compression’)app.use(compression())

6、还可以把包拆开，然后没有用的剔除掉

移步vue配置文件页面，复制 ‘’拆分依赖包‘’

注意：

vuecli 3和 vuecli2.x还有一个区别是
vuecli 3会默认开启一个 css分离插件 ExtractTextPlugin
每一个模块的 css文件都会分离出来，整整13个 css文件，而我们的首页就请求了4个，花费了不少的资源请求时间
我们可以在 vue.config.js中关闭它

 css: {    // 是否使用css分离插件 ExtractTextPlugin    extract: false,    // 开启 CSS source maps?    source

借鉴：https://www.cnblogs.com/pingan8787/p/11838126.html，后面还会有补充