vue配置文件

优化三步骤：去掉了jeecg的online，然后取消预加载，再然后拆包看看还有其他的了吗，在然后可以开启gizp压缩

1、vue中取消预加载

module.exports = {
   // 移出prefetch 插件
    config.plugins.delete('prefetch')
}

2、拆分依赖包（目的是为了去掉jeecg-boot没有用到的包）

  configureWebpack: config => {
    //生产环境取消 console.log
    if (process.env.NODE_ENV === 'production') {
      config.optimization.minimizer[0].options.terserOptions.compress.drop_console = true
      
    }else {
      
      config.optimization = {
        runtimeChunk: "single",
        splitChunks: {
          chunks: "all",
          // maxInitialRequests: Infinity,
          minSize: 0, // 依赖包超过20000bit将被单独打包
          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("@", "")}`;
              }
            }
          }
        },
      };
    }
   
  },

npm run 起来就会发现是这样的，不用部署去

3、vue-cli3安装webpack-bundle-analyzer分析包文件（专家看的，先留在这）

转自：https://blog.csdn.net/maquealone/article/details/99674246 ，怕消失掉，收藏 ！= 学会

cnpm install webpack-bundle-analyzer -D

修改vue.config.js

module.exports = {
    chainWebpack: config => {
        if (process.env.use_analyzer) {     // 分析
            config
                .plugin('webpack-bundle-analyzer')
                .use(require('webpack-bundle-analyzer').BundleAnalyzerPlugin)
        }
    }
}

修改package.json

"scripts": {
    "analyzer": "use_analyzer=true npm run serve"
  },

然后运行npm run analyzer。但是我运行后发现报错了。如下：

原来由于windows下不支持xxx=xxx这种写法。为了支持这种写法，用npm安装cross-env。然后修改package.json，如下:

"analyzer": "cross-env use_analyzer=true npm run serve"

再次运行npm run analyzer，发现运行成功，打开127.0.0.1就可以看到包的情况：

注：上述已是优化后看到的图，未优化前，element-ui和v-charts占用了很大的控件。针对这两个插件做了优化后（采用CDN方式），app.js小了很多。

留在这做个警示

$ npm install uglifyjs-webpack-plugin --save-dev

4、gzip压缩

npm install -D compression-webpack-plugin

const CompressionPlugin = require("compression-webpack-plugin");
...
configureWebpack: (config) => {
    if (process.env.NODE_ENV === 'production') {
      // 为生产环境修改配置...
      config.mode = 'production';
      // 将每个依赖包打包成单独的js文件
      ...
      if(openGzip){
        config.plugins = [
          ...config.plugins,
          new CompressionPlugin({
            test:/\.js$|\.html$|.\css/, //匹配文件名
            threshold: 10240,//对超过10k的数据压缩
            deleteOriginalAssets: false //不删除源文件
          })
        ]
      }
    } else {
      // 为开发环境修改配置...
      config.mode = 'development';
    }
    ...
  },

注：生成的压缩文件以.gz为后缀，一般浏览器都已支持.gz的资源文件，在http请求的Request Headers 中能看到 Accept-Encoding:gzip。要使服务器返回.gz文件，还需要对服务器进行配置，根据Request Headers的Accept-Encoding标签进行鉴别，如果支持gzip就返回.gz文件。