解决!!前端项目打包后生成的chunk-vendors文件过大,导致加载太慢

作者: web 发布时间: 2022-03-25 浏览: 4397 次 编辑

话不多说,直接使用插件解决这个问题!
第一步:先下载这个插件

npm install --save-dev compression-webpack-plugin

第二步:修改vue.config.js配置文件,如果没有vue.config.js,在根目录自己创建一个,下面是配置文件的代码

const path = require('path');

const webpack = require('webpack')
const CompressionWebpackPlugin = require('compression-webpack-plugin')
const productionGzipExtensions = ['js', 'css']
const isProduction = process.env.NODE_ENV === 'production'

module.exports = {
  lintOnSave: false,
  runtimeCompiler: true,
  publicPath: './', // 设置打包文件相对路径
  // 这是前端解决跨域的代码
  devServer: {
    // open: process.platform === 'darwin',
    // host: 'localhost',
    port: 8080,
    // open: true, //配置自动启动浏览器
    proxy: {
      '/api': {
        target: ``,//写上接口基地址
        changeOrigin: true,
        ws: true,
        // secure: false, //如果是http接口,需要配置此参数
        pathRewrite: {
          '^/api': ''
        }
      }
    }
  },
  configureWebpack:{
    resolve:{
      alias:{
        '@':path.resolve(__dirname, './src'),
        '@i':path.resolve(__dirname, './src/assets'),
      } 
    },
    plugins: [
      new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/),
      
      // 下面是下载的插件的配置
      new CompressionWebpackPlugin({
        algorithm: 'gzip',
        test: new RegExp('\\.(' + productionGzipExtensions.join('|') + ')$'),
        threshold: 10240,
        minRatio: 0.8
      }),
      new webpack.optimize.LimitChunkCountPlugin({
        maxChunks: 5, 
        minChunkSize: 100
      })
    ]
  }
} 

到这里问题基本上就解决了,本人之前做的项目是放在Nginx服务器的,Nginx服务器也要有相应的配置

server{
    listen 8087;
    server_name localhost;

    gzip on;
    gzip_min_length 1k;
    gzip_comp_level 9;
    gzip_types text/plain application/javascript application/x-javascript text/css application/xml text/javascript application/x-httpd-php image/jpeg image/gif image/png;
    gzip_vary on;
    gzip_disable "MSIE [1-6]\.";
}



我们可以看到,现在打包生成的是成对的文件,一个是JS,一个是压缩的,当项目部署到服务器的时候,页面加载的就是压缩的文件。
注:如果真的需要特别快的加载速度,更直接的办法就是加大服务器带宽