vue项目优化首页因为加载资源过慢的问题

场景:打的包app.js有15M，首页需要加载的资源为近20MB,

//获取时间戳
const Timestamp= new Date().getTime();
const path = require('path')
const CompressionPlugin = require("compression-webpack-plugin")
function resolve (dir) {
  return path.join(__dirname, '.', dir)
}
module.exports = {
    publicPath: "./",
    outputDir: 'dist',
    assetsDir: 'static',
    /* 是否在构建生产包时生成 sourceMap 文件，false将提高构建速度 */
    lintOnSave: false,
    productionSourceMap:false,
    chainWebpack: config => {
        const svgRule = config.module.rule("svg");
        svgRule.uses.clear();
        svgRule
        .use("svg-sprite-loader")
        .loader("svg-sprite-loader")
        .options({
            symbolId: "icon-[name]"
         });
        // 给js和css配置版本号,处理发布缓存问题
       config.output.filename('static/js/[name].' + Timestamp + '.js').end();
        config.output.chunkFilename('static/js/[name].' + Timestamp + '.js').end();
        config.plugin('extract-css').use(require('mini-css-extract-plugin')).tap(args => [{
            filename: `static/css/[name].${Timestamp}.css`,
            chunkFilename: `static/css/[name].${Timestamp}.css`
        }]);
       },
    configureWebpack: () => {
         if (process.env.NODE_ENV === 'production') {
          return {
            plugins: [
            new CompressionPlugin({
            test: /.js$|.html$|.css$|.jpg$|.jpeg$|.png/, // 需要压缩的文件类型
            threshold: 10240, // 归档需要进行压缩的文件大小最小值，我这个是10K以上的进行压缩
            deleteOriginalAssets: false, // 是否删除原文件
            minRatio: 0.8
              })
              ]
          }
         }
    },
    devServer: {
        open: true,
        https: false,
        proxy: {
            '/v2': {
                target: process.env.VUE_APP_API_URL1,
                ws: true,
                changeOrigin: true,
            }
        }
    },

}

 

优化的点: 

1. 关闭map打包文件，减少资源

productionSourceMap:false,

2.路由用懒加载

3.前端打包gzip,然后ngixs上开启gzip