前端app.js文件过大，前端慢请求优化

app.js文件过大可分为两部分优化：

一：减小app.js文件的大小：

1.代码压缩：

在webpack.prod.config.js使用compression-webpack-plugin,npm下载即可。生产环境启用gzip

  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

    })

  )

Nginx的gzip压缩：

在nginx中的default.conf中配置：

server{  

    gzip on;  

    gzip_types text/plain text/css application/json application/javascript text/xml application/xml application/xml+rss text/javascript;  

    gzip_proxied any;  

    gzip_vary on;  

    gzip_comp_level 6;  

    gzip_buffers 16 8k;  

    gzip_http_version 1.1;  

    gzip_disable "MSIE [1-6]\.";  

      

    ...  

}

• gzip on;：启用gzip压缩。
• gzip_types：定义哪些MIME类型的响应需要被压缩。你可以根据需要添加或删除类型。
• gzip_proxied：允许或禁止压缩代理请求的响应。any意味着压缩所有代理请求的响应。
• gzip_vary on;：在响应头中添加Vary: Accept-Encoding，告诉客户端内容已通过gzip压缩。
• gzip_comp_level：设置压缩级别，范围从1（最快，压缩率最低）到9（最慢，压缩率最高）。
• gzip_buffers：设置用于压缩响应的缓冲数量和大小。
• gzip_http_version：设置支持压缩的HTTP协议版本（通常是1.1）。
• gzip_disable：针对特定的User-Agent禁用gzip压缩，这里是一个示例，禁用了IE6及更早版本的压缩

  css压缩，在webpack.base.config.js中使用mini-css-extract-plugin，注意vue，webpack版本

  const MiniCssExtractPlugin = require('mini-css-extract-plugin');

   module.exports={

  module: {

      rules: [

        {

          test: /\.css$/,

          use: [MiniCssExtractPlugin.loader, 'css-loader'],

        },

      ],

    },

  }

  路由懒加载：

  const job = () => import('../views/job/layout.vue');

  const list = () => import('../views/job/list.vue');

  const detail = () => import('../views/job/detail.vue');

  const jobRouter = {

    name: 'job',

    path: '/job',

    component: job,

    children: [

      {

        name: 'jobList',

        path: 'jobList',

        component: list,

      },

      {

          name: 'jobDetail',

          path: 'jobDetail',

          component: detail,

      }

    ]

  }

  export default jobRouter

  二：app.js分割

  1.使用splitChunks

  webpack.base.conf.js文件中使用webpack-bundle-analyzer排查包的大小针对性分割成chunk.js

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

  在module.exports中使用：生产关闭需自行配置或者注释

     plugins: [  

       new BundleAnalyzerPlugin()  

     ]，

  检查完包的大小后 分离出过大的包。在在module.exports中optimization配置：

    optimization: {  

      splitChunks: {

        chunks: 'all',

          minSize: 20000,

          maxSize: 0,

          minChunks: 1,

          maxAsyncRequests: 30,

          maxInitialRequests: 30,

          automaticNameDelimiter: '~',

          name: true,

          cacheGroups: {

            styles: {

              name: 'styles',

              test: /\.css$/,

              chunks: 'all',

              enforce: true,

            },

          antd: {  

            test: /[\\/]node_modules[\\/]ant-design-vue[\\/]/,  

            name: 'chunk-antd',  

            chunks: 'all',  

          },                  

            moment:{

            test: /[\\/]node_modules[\\/]moment[\\/]/,  

            name: 'chunk-moment',  

            chunks: 'all',

          } ,

            elementUI: {  

              test: /[\\/]node_modules[\\/]element-ui[\\/]/,  

              name: 'chunk-elementUI',  

              chunks: 'all',  

            },  

            vendors: {  

              test: /[\\/]node_modules[\\/]/,

              priority: -10,  

              chunks: 'initial',  

              // 也可以设置minSize和maxSize来进一步控制  

            },

            'lodash-vendors': {  

              test: /[\\/]node_modules[\\/]lodash/,  

              name: 'vendors-lodash',  

              chunks: 'all',  

            },

            'echarts-vendors': {  

              test: /[\\/]node_modules[\\/]echarts/,  

              name: 'vendors-echarts',  

              chunks: 'all',  

            },

            'icon-park': {  

              test: /[\\/]node_modules[\\/]@icon-park/,  

              name: 'chunk-icon-park',  

              chunks: 'all',  

            },

            'xlsx': {  

              test: /[\\/]node_modules[\\/]xlsx/,  

              name: 'chunk-xlsx',  

              chunks: 'all',  

            },

            default: {

              minChunks: 1,

              priority: -20,

              reuseExistingChunk: true,

              maxSize:1000000,

              chunks: 'all',  

            },

          }

      },  

    },

  抽离出部分较大的npm包和css，default会将app.js变的很小，但是自身可能会过大，设置maxSize超过1000000字节（约1MB），如果某个chunk的大小超过这个限制，Webpack会尝试将其分割成更小的chunks。priority为这个属性用于设置规则的优先级。优先级被设置为-20，这意味着这个规则比vendors规则（优先级为-10）的优先级更低。Webpack在处理代码块时，会按照优先级的顺序应用规则。

  总结：代码体积大就压缩，压缩不行就切割成chunk。