vue首屏加载解决方案

https://www.jianshu.com/p/6262772bdc9c
1.组件异步加载 import xxx from "./xxx.vue"      改为     'my-component':()=>import('./my-async-component')

2.在webpack打包的过程中，将多余文件去掉，如map文件，即在config/index.js中将productionSourceMap的值修改为false，就可以在编译时不生成.map文件了

3.路由懒加载

{
  name: 'testPage',
  path:'testPage',
  component(resolve) {
    require(['page/views/testPage/main.vue'], resolve)
  }
},

改为 

{
  path: 'testPage',
  name: 'testPage',
  component: () => import('page/views/testPage/mian'),
},

 

4、vue-cli开启打包压缩和后台配置gzip访问

首先安装插件：compression-webpack-plugin

在 config/index.js中将productionGzip 改为 true

设置gzip

if (config.build.productionGzip) {
  const CompressionWebpackPlugin = require('compression-webpack-plugin')

  webpackConfig.plugins.push(
    new CompressionWebpackPlugin({
      asset: '[path].gz[query]',
      algorithm: 'gzip',
      test: new RegExp(
        '\\.(' +
        config.build.productionGzipExtensions.join('|') +
        ')$'
      ),
      threshold: 10240,
      minRatio: 0.8,
      deleteOriginalAssets: true
    })
  )

ginx开启gzip

Gzip on;
 
gzip_min_length 1024;
 
gzip_buffers   4  8k;
 
gzip_types   text/plain application/x-javascript text/css  application/xml;

查看各个依赖打包后大小

package.json  scripts添加

    "build-report": "npm run build --report"

运行

npm run build --report