首页 前端知识 前端app.js文件过大,前端慢请求优化

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

2024-06-16 09:06:02 前端知识 前端哥 158 655 我要收藏

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。

转载请注明出处或者链接地址:https://www.qianduange.cn//article/12375.html
标签
评论
发布的文章

用HTML写B站首页

2024-06-22 07:06:37

前端开发 4: jQuery

2024-06-22 01:06:02

网页开发 HTML

2024-06-22 01:06:17

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!