Vue首屏加载慢的优化方案

使用vue构建项目首屏加载时，出现加载慢，白屏的问题解决方案：

步骤一 webpack来打包vue项目，vendor.js过大问题解决

• 1.造成过大的原因是因为在main.js导入第三库太多时,webpack合并js时生成了vendor.js(我们习惯把第三方库放在vendor里面)造成的.如下图在main.js引用了一些第三方库。导致了你的服务器端的js文件越大则用户加载页面的时间会越长(因为所需下载js的时间越久)
  首先在index.html中，使用CDN的资源，复制以下bootstrap的链接资源：

• 2.在bulid/webpack.base.conf.js文件中，添加externals，导入index.html下所需的资源模块：

module.exports = {
  context: path.resolve(__dirname, '../'),
  entry: {
    app: ['babel-polyfill', 'lib-flexible', './src/main.js']
  },
  externals: { // <-添加
    vue: 'Vue',
    vuex: 'Vuex',
    'vue-router': 'VueRouter',
    VueAwesomeSwiper: 'VueAwesomeSwiper'
  },

• 3.在main.js里将以下 import 注释 替换 require 引入模块

// import Vue from 'vue'
// import VueAwesomeSwiper from 'vue-awesome-swiper'

const Vue = require('vue')
const VueAwesomeSwiper = require('VueAwesomeSwiper')

Vue.use(VueAwesomeSwiper)

• 4.当然可以在生产环境当中删除掉不必要的console.log
  打开build/webpack.prod.conf.js 在plugins里添加以下代码

  plugins: [
    new webpack.optimize.UglifyJsPlugin({ //添加-删除console.log
      compress: {
        warnings: false,
        drop_debugger: true,
        drop_console: true
      },
      sourceMap: true
    }),

• 5.执行npm run build
  在控制台当中可以看到文件压缩的记录
  static/js/vendor.50304a716a06fb947df7.js 的size
  我这里一开始有450k 当优化完以后整整小了一半多 222kB（当你用了一些ui组件库替换成cdn说不定更大的惊喜）

  
  
  sizexiao.png

• 6.最后可以通过打开项目测试在首屏加载时有着明显的打开提速效果！

步骤二 vue-cli开启打包压缩 和后台配合 gzip访问

• 1.首先打开 config/index.js ，找到 build 对象中的 productionGzip ，改成 true
• 2. 打开 productionGzip: true 之前，先要安装依赖 compression-webpack-plugin ，官方推荐的命令是：

npm install --save-dev compression-webpack-plugin 
//(此处有坑) 如果打包报错，应该是版本问题 ，先卸载之前安装的此插件 ，然后安装低版本 
 npm install --save-dev [email protected]

• 3.等安装好了，重新打包 npm run build ，此时打包的文件会 新增 .gz 文件。是不是比原来的js文件小很多呢，之后项目访问的文件就是这个.gz文件
• 4.后台nginx开启gzip模式访问，浏览器访问项目，自动会找到 .gz 的文件。加载速度明显提高。

开启 nginx gzip ,在 nginx.conf 配置文件中 配置

http {  //在 http中配置如下代码，
   gzip on;
   gzip_disable "msie6"; 
   gzip_vary on; 
   gzip_proxied any;
   gzip_comp_level 8; #压缩级别
   gzip_buffers 16 8k;
   #gzip_http_version 1.1;
   gzip_min_length 100; #不压缩临界值
   gzip_types text/plain application/javascript application/x-javascript text/css application/xml text/javascript application/x-httpd-php image/jpeg image/gif image/png;
 }

保存退出 ，并 重启 nginx

systemctl reload nginx.service  
systemctl restart nginx.service

• 5 测试访问

curl -I -H "Accept-Encoding: gzip, deflate" "http://xxx.com"  //访问请求中 Content-Encoding: gzip 表示 压缩成功页面，

同理 访问js，css等 可测试 是否压缩成功.

• 6 最后访问项目，进入首页的时候加载速度会有所提升