vue单页面应用首次访问速度优化

应用背景：应用采用前后端分离开发，前端直接使用nginx部署vue打包文件提供访问需要；

问题阐述：vue大页面应用直接npm run build进行打包，前端部署后首次访问速度缓慢，基本需要40秒左右，也有一部分原因是因为我的服务器只有1M的网，打出来的js文件最大的有4M+导致，因自己并非前端开发，只处于刚刚能应付数据展示再前台的地步，所以这个问题让我甚是苦恼；

解决方法：

0、工具使用查看各个js占用的大小

工具使用webpack.prod.conf.js 中 增加 const BundleAnalyzerPlugin = require('webpack-bundle- analyzer').BundleAnalyzerPlugin;

new BundleAnalyzerPlugin(),

如图：

文件配置

打包后各个文件大小占比

加好之后npm run build 自动会打开localhost:8888，即可看到各个文件占用比例，针对文件处理即可

1、网上普遍答复都是懒加载组件（实际测试中效果不是特别明显）

main.js 中修改组件引用写法：

const tabar = resolve => require(['./components/tabar'], resolve)

Vue.component('tabar', tabar);

即可做到使用时才加载的效果，但是初次加载时候还是会有很大的文件

2、改为cdn引用（强烈推荐）

因为我自身的服务器只有1M的网速，文件大的问题有时候就算压缩也是解决不了的，有些非常公用的插件bootstrap vue jquery css之类的建议使用cdn外部引用，如图

cdn引入

我本身构建vue的包后，最大的文件快5M，实在太大了，使用cdn公共服务器引入后，大概能缩小到1m，但是这样也不是我们 最终的大小，继续优化。

3、npm install --save-dev compression-webpack-plugin@1.1.12 强烈推荐

compression插件使用：

webpack.prod.conf.js文件下增加const CompressionPlugin = require('compression-webpack-plugin')

new CompressionPlugin({

test: /\.(js|css)?$/i, // 哪些文件要压缩

filename: '[path].gz[query]',　// 压缩后的文件名

algorithm: 'gzip',　// 使用gzip压缩

minRatio: 1　// 压缩率小于1才会压缩

// deleteOriginalAssets: true // 删除未压缩的文件，谨慎设置，如果希望提供非gzip的资源，可不设置或者设置为false

}),

对js及css进行压缩处理，效果是立竿见影的，直接将250kb文件压缩到了50kb

compression配置

4、nginx配置修改 nginx部署必备（强烈推荐）

server中增加

gzip on;

    gzip_buffers 32 4K;

    gzip_comp_level 6;

    gzip_min_length 100;

    gzip_types application/javascript text/css text/xml application/json;

    gzip_vary on;

大概可以让文件再缩小一半，通过以上优化，我的1m网速服务器基本可以做到1秒左右打开服务器（有时候取决于cdn的网速， 很关键）

总结：以上优化操作，基本可以将我最初40秒初始访问页面速度提升到1、2秒，文件请求大概缩小到50kb左右