vue-cli3.0 +element-admin页面首次加载缓慢（空白页面）

问题： vue页面首次加载缓慢（空白页面）,20s才能加载出来页面

解决： 

1. 在前端项目中使用gzip

安装插件: npm install compression-webpack-plugin --save-dev
使用：在vue.config.js

const webpack = require('webpack')
const CompressionWebpackPlugin = require('compression-webpack-plugin')
const productionGzipExtensions = ['js', 'css']

module.exports = { 

configureWebpack: {
  devtool: 'cheap-module-source-map', // ！！！这个很重要，决定性因素
  plugins: [
    new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/),

    // 配置compression-webpack-plugin压缩
    new CompressionWebpackPlugin({
      algorithm: 'gzip',
      test: new RegExp('\\.(' + productionGzipExtensions.join('|') + ')$'),
      threshold: 10240,
      minRatio: 0.8
    }),
    new webpack.optimize.LimitChunkCountPlugin({
      maxChunks: 20,
      minChunkSize: 100
    })
  ]
} 

}        

 上图，是用完gzip压缩完之后，大概14s左右

通过控制台上看出来，chunk-xxx.js包和app.js包都是在MB以上，所以导致首页加载慢，那就想把这些chunk文件给分包

2.vue.config.js文件

// ---- chunk分包 ------
module.exports = 
  chainWebpack: config => {
    // 压缩代码
    config.optimization.minimize(true)
    // splitChunks 分包
    config
      .optimization.splitChunks({
        chunks: 'all',
        cacheGroups: {
          libs: {
            minChunks: 1,
            name: 'chunk-libs',
            test: /[\\/]node_modules[\\/]/,
            priority: 10
          },
          elementUI: {
            minChunks: 1,
            name: 'chunk-elementUI',
            priority: 60,
            test: /[\\/]node_modules[\\/]_?element-ui(.*)/,
            chunks: 'initial'
          },
          eCharts: {
            name: 'chunk-eCharts',
            test: /[\\/]node_modules[\\/]_?echarts(.*)/,
            priority: 60,
            chunks: 'initial'
          },
          zrender: {
            name: 'chunk-zrender',
            test: /[\\/]node_modules[\\/]_?zrender(.*)/,
            priority: 60,
            chunks: 'initial'
          },
          commons: {
            minChunks: 2,
            name: 'chunk-commons',
            test: resolve('src/components'),
            chunks: 'async',
            priority: 1
          }
        }
      })
    config.optimization.runtimeChunk('single')
  }
)

  }

}

// 拆包配合 webpack-bundle-analyzer 插件（资源包可视化占比）

1.安装：cnpm intall webpack-bundle-analyzer –save-dev 

2. vue.cofig.js 使用

const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin

chainWebpack: config => {
  config
    .plugin('webpack-bundle-analyzer') 
    .use(BundleAnalyzerPlugin) 
    .end()
}

3. 路由懒加载

1.未使用懒加载

 2.使用懒加载

4.去除build的时map文件

// vue.config.js
module.export = {
 productionSourceMap: false
}

5. 终极大招！！！！！（我是换成这个属性，立马解决了懊恼三天的问题，亲测是2s打开页面）

// vue.config.js
module.exports = {
 configureWebpack: {
  devtool: 'cheap-module-source-map' // 换成这个属性
 }
}

参考链接：[转] Webpack的devtool和source maps - {前端开发} - 博客园

参考2： https://mp.weixin.qq.com/s/kJdygUo2rpa1onrSQnNzuA