vue项目登录页chunk-vendors过大解决办法

我的项目没做完,没进行打包,直接装插件配置

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

然后配置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: {
   port: 8080,
   open: true,
   proxy: {
     '/api': {
        target: 'http://xxx',//接口地址
       changeOrigin: true,
       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
      })
    ]
  }
}

如果报错TypeError: Cannot read property ‘tapPromise‘ of undefined
则是版本问题
先执行卸载命令->npm uninstall compression-webpack-plugin
执行安装命令->npm i compression-webpack-plugin@5.0.1

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容