vue打包之后体积过大的问题处理----vue.config.js

基于vue-cli4.0     老样子   话不多说  直接上代码:

// Vue.config.js 配置选项

const webpack = require('webpack')

// 判断开发环境

const isProduction = process.env.NODE_ENV === 'production';

module.exports = {

  // publicPath: process.env.NODE_ENV === 'production'

  // ? './'

  // : '/',

  publicPath: "./",

  configureWebpack: {

    plugins: [

      new webpack.ProvidePlugin({

        $: "jquery",

        jQuery: "jquery",

        "windows.jQuery": "jquery"

      })

    ]

  },

  //webpack配置

  configureWebpack: config => {

    // 开启gzip压缩

    if (isProduction) {

      // config.plugins.push(new CompressionWebpackPlugin({

      //   algorithm: 'gzip',

      //   test: /\.js$|\.html$|\.json$|\.css/,

      //   threshold: 10240,

      //   minRatio: 0.8

      // }));

      // 开启分离js

      config.optimization = {

        runtimeChunk: 'single',

        splitChunks: {

          chunks: 'all',

          maxInitialRequests: Infinity,

          minSize: 20000,

          cacheGroups: {

            vendor: {

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

              name(module) {

                // get the name. E.g. node_modules/packageName/not/this/part.js

                // or node_modules/packageName

                const packageName = module.context.match(/[\\/]node_modules[\\/](.*?)([\\/]|$)/)[1]

                // npm package names are URL-safe, but some servers don't like @ symbols

                return `npm.${packageName.replace('@', '')}`

              }

            }

          }

        }

      };

      // 取消webpack警告的性能提示

      config.performance = {

        hints: 'warning',

        //入口起点的最大体积

        maxEntrypointSize: 50000000,

        //生成文件的最大体积

        maxAssetSize: 30000000,

        //只给出 js 文件的性能提示

        assetFilter: function (assetFilename) {

          return assetFilename.endsWith('.js');

        }

      }

    }

  },

  chainWebpack(config) {

    // it can improve the speed of the first screen, it is recommended to turn on preload

    config.plugin('preload').tap(() => [{

      rel: 'preload',

      // to ignore runtime.js

      // https://github.com/vuejs/vue-cli/blob/dev/packages/@vue/cli-service/lib/config/app.js#L171

      fileBlacklist: [/\.map$/, /hot-update\.js$/, /runtime\..*\.js$/],

      include: 'initial'

    }])

    // when there are many pages, it will cause too many meaningless requests

    config.plugins.delete('prefetch')

    // 其他配置

    // config.entry('main').add('babel-polyfill') // main是入口js文件

    config

      .when(process.env.NODE_ENV !== 'development',

        config => {

          config

            .optimization.splitChunks({

              chunks: 'all',

              cacheGroups: {

                libs: {

                  name: 'chunk-libs',

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

                  priority: 10,

                  chunks: 'initial' // only package third parties that are initially dependent

                },

                elementUI: {

                  name: 'chunk-elementUI', // split elementUI into a single package

                  priority: 20, // the weight needs to be larger than libs and app or it will be packaged into libs or app

                  test: /[\\/]node_modules[\\/]_?element-ui(.*)/ // in order to adapt to cnpm

                }

              }

            })

          // https:// webpack.js.org/configuration/optimization/#optimizationruntimechunk

          config.optimization.runtimeChunk('single')

        }

      )

  },

  css: {

    loaderOptions: {

      less: {

        javascriptEnabled: true

      }

    },

    extract: true, // 是否使用css分离插件 ExtractTextPlugin

    sourceMap: false, // 开启 CSS source maps

    modules: false // 启用 CSS modules for all css / pre-processor files.

  },

  // 打包时不生成.map文件

  productionSourceMap: false

  // 配置 webpack-dev-server 行为。

  // devServer: {

  //   open: process.platform === 'darwin',

  //   host: '0.0.0.0',

  //   port: 8080,

  //   https: false,

  //   hotOnly: false,

  //   // 查阅 https://github.com/vuejs/vue-docs-zh-cn/blob/master/vue-cli/cli-service.md#配置代理

  //   proxy: {

  //     '/api': {

  //       target: "http://qsdx.hh.g.cn:96", //正式环境测试版本

  //       // target: "http://192.168.2.228:1102", //luzongyu

  //       changeOrigin: true,

  //       pathRewrite: {

  //         "^/api": "/"

  //       }

  //     }

  //   }, // string | Object

  //   before: app => {}

  // }

}