解决vue3.0打包优化与CDN优化

1.header中需要添加的 <% for (var i in htmlWebpackPlugin.options.cdn&&htmlWebpackPlugin.options.cdn.css) { %> <% } %>

2.body中需要添加的 <% for (let i in htmlWebpackPlugin.options.cdn && htmlWebpackPlugin.options.cdn.js) { %> <% } %>

 

 

 

 

 

const path = require('path');
const webpack = require('webpack')
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
// gzip压缩
const CompressionWebpackPlugin = require('compression-webpack-plugin')
// 是否为生产环境
const isProduction = process.env.NODE_ENV !== 'development'
// 是使用cdn
const needCdn = true
// 是否压缩文件
const isZip = true
// cdn链接
const cdn = {
  // cdn：模块名称和模块作用域命名（对应window里面挂载的变量名称）
  externals: {
    'vue': 'Vue',
    'vue-router': 'VueRouter',
    'vuex': 'Vuex',
    'axios': 'axios',
    'element-plus': 'ElementPlus'
  },
  // cdn的css链接
  css: [
   'http://xbpark.foxcube.cn/desktop/cs/index.css'
  ],
  // cdn的js链接
  js: [
    'http://xbpark.foxcube.cn/desktop/js/vue.global.js',
    'http://xbpark.foxcube.cn/desktop/js/vue-router.global.js',
    'http://xbpark.foxcube.cn/desktop/js/axios.min.js',
    'http://xbpark.foxcube.cn/desktop/js/vuex.global.js',
    'http://xbpark.foxcube.cn/desktop/js/element-plus.js'
  ]
}




module.exports = {
  // 公共路径
  publicPath: './',
  // 不同的环境打不同包名
  outputDir: process.env.NODE_ENV === "development" ? 'devdist' : 'dist',
  // 一次配置，全局使用，这个scss 因为每个文件都要引入
  css: {  // 一次配置，全局使用，这个scss 因为每个文件都要引入
    loaderOptions: {
      //引入sass时用到
      sass: {
        // data: `@import "./src/assets/hotcss/px2rem.scss";`
      }
    }
  },
  //此处引入第三方插件
  pluginOptions: {
    /**
     * 引入style-resources-loader插件
     * less引入与sass引入方法不一样
     * 需要style-resources-loader 和 vue-cli-plugin-style-resources-loader两个插件才能引入成功
     * 注意这里引入less文件时不能用别名引入
     */
    // 'style-resources-loader': {
    //   preProcessor: 'less',
    //   patterns: [
    //     path.resolve(__dirname, './src/assets/public.less'),
    //   ],
    // },
  },
  //打包时是否产生map文件
  productionSourceMap: false,
  //对内部的 webpack 配置进行更细致的修改
  chainWebpack: config => {
  	//在路由中用懒加载时，webpack默认有预加载此设置是关闭预加载
  	config.plugins.delete('preload') 
    config.plugins.delete('prefetch')
    //压缩图片
    config.module
      .rule('images')
      .test(/\.(png|jpe?g|gif|svg)(\?.*)?$/)
      // .use('url-loader')
      // .loader('url-loader')
      .use('image-webpack-loader')
      .loader('image-webpack-loader')
      .options({ bypassOnDebug: true })
      .end()
    // 设置别名
    config.resolve.alias
      .set('@', path.resolve(__dirname, './src'))
      // .set('assets', path.resolve(__dirname, './src/views'))
      // .set('@I', path.resolve(__dirname, './src/assets/image'))
      // .set('@F', path.resolve(__dirname, './src/shujudata/public.js'))
      // .set('@H', path.resolve(__dirname, './src/shujudata/https.js'))
      // .set('@R', path.resolve(__dirname, './src/router'))
      // .set('@S', path.resolve(__dirname, './src/store'))
      // .set('@C', path.resolve(__dirname, './src/components/comm'))
      // .set('@U', path.resolve(__dirname, './src/shujudata/severUrl.js'))
    // 生产环境或本地需要cdn时，才注入cdn
    config.plugin('html').tap(args => {
      if (needCdn) args[0].cdn = cdn
      return args
    })
  },
  
  // 关闭eslint
  lintOnSave: false,
  // 配置服务器(开发环前端解决跨域：此项目没有用到服务代理)
  devServer: {
    proxy: {
      '/api': {
        target: 'http://xxpark.foxcube.cn:8100/',
        changeOrigin: true,
        ws: true,
        pathRewrite: {
          '^/api': ''
        }
      }
    }
  },
  // 覆盖webpack默认配置的都在这里
  configureWebpack: config => {
    //引入jQuery
    // config.plugins.push(
    //   new webpack.ProvidePlugin({
    //     $: "jquery",
    //     jQuery: "jquery",
    //     "windows.jQuery": "jquery"
    //   })
    // )
    // 用cdn方式引入，则构建时要忽略相关资源
    if (needCdn) config.externals = cdn.externals
    // 生产环境相关配置
    if (isProduction && isZip) {
      // gzip压缩
      const productionGzipExtensions = ['html', 'js', 'css']
      config.plugins.push(
        new CompressionWebpackPlugin({
          filename: '[path].gz[query]',
          algorithm: 'gzip',
          test: new RegExp(
            '\\.(' + productionGzipExtensions.join('|') + ')$'
          ),
          threshold: 10240, // 只有大小大于该值的资源会被处理 1240
          minRatio: 0.8, // 只有压缩率小于这个值的资源才会被处理
          deleteOriginalAssets: false // 删除原文件
        })
      )

      
    }



    // 公共代码抽离(抽离公共代码后路由的懒加载将不起作用。如果要用懒加载则不添加一下代码)
    config.optimization = {
      minimize:true,// 开启压缩js代码(默认true)
      splitChunks: {
        chunks: 'async',
          minSize: 30000,
          maxSize: 0,
          minChunks: 1,
          maxAsyncRequests: 6,
          maxInitialRequests: 4,
          automaticNameDelimiter: '~',
        cacheGroups: {
            // vue: {
            //     name: "vue",
            //     test: /[\\/]node_modules[\\/]vue[\\/]/,
            //     test: /[\\/]node_modules[\\/]vue[\\/]/,
            //     priority: -10
            // },
            // vuex: {
            //     name: 'vuex',
            //     test: /[\\/]node_modules[\\/]vuex[\\/]/,
            //     priority: -10
            // },
            // 'vue-router': {
            //     name: 'vue-router',
            //     test: /[\\/]node_modules[\\/]vue-router[\\/]/,
            //     priority: -10
            // },
            elementPlus: {
                name: 'element-plus',
                test: /[\\/]node_modules[\\/]element-plus[\\/]/,
                priority: -10
            },
            // 'libs-common-utils': {
            //     name: 'libs-common-utils',
            //     test: /[\\\/]node_modules[\\\/]libs-common-utils[\\\/]/,
            //     priority: -10
            // },
            vendors: {
                test: /[\\\/]node_modules[\\\/]/,
                priority: -20
            },
        }
    }
    //   splitChunks:{
    //     chunks: 'all',
    //   minSize: 10000, // 允许新拆出 chunk 的最小体积，也是异步 chunk 公共模块的强制拆分体积
    //   maxAsyncRequests: Infinity, // 每个异步加载模块最多能被拆分的数量
    //   maxInitialRequests: 6, // 每个入口和它的同步依赖最多能被拆分的数量
    //   enforceSizeThreshold: 20000, // 强制执行拆分的体积阈值并忽略其他限制
    //   cacheGroups: {
    //     assets: {
    //       // assetsImgSvg 单独拆包
    //       name: 'chunk-assets',
    //       test: /[\\/]src[\\/]assets/,
    //       priority: 20, // 权重
    //       chunks: 'all' // 只打包按需引入的模块
    //     },
    //     components: {
    //       // components 单独拆包
    //       name: 'chunk-components',
    //       test: /[\\/]src[\\/]components/,
    //       priority: 20, // 权重
    //       chunks: 'all' // 只打包按需引入的模块
    //     },
    //     // pdfJS: {
    //     //   // pdfJS 单独拆包
    //     //   name: 'chunk-pdfJS',
    //     //   test: /[\\/]node_modules[\\/]_pdfjs-dist/,
    //     //   priority: 20, // 权重要大于 libs
    //     //   chunks: 'all' // 只打包按需引入的模块
    //     // },
    //     // ylz: {
    //     //   // components 单独拆包
    //     //   name: 'chunk-ylz',
    //     //   test: /[\\/]node_modules[\\/]@ylz/,
    //     //   priority: 20, // 权重要大于 libs
    //     //   chunks: 'all' // 只打包按需引入的模块
    //     // },
    //     // vconsole: {
    //     //   // vconsole 单独拆包
    //     //   name: 'chunk-vconsole',
    //     //   test: /[\\/]node_modules[\\/]vconsole/,
    //     //   priority: 20, // 权重要大于 libs
    //     //   chunks: 'all' // 只打包按需引入的模块
    //     // },
    //     libs: {
    //       // 第三方库
    //       name: 'chunk-libs',
    //       test: /node_modules/,
    //       priority: 10
    //       // chunks: "initial" // 只打包初始时依赖的第三方
    //     },
    //     commons: {
    //       // 公共模块包
    //       name: 'chunk-commons',
    //       minChunks: 2,
    //       priority: 0,
    //       reuseExistingChunk: true
    //     }
    //   }
    // }
  }
  return {
    plugins:[
      new BundleAnalyzerPlugin()
    ]
  }
  },

}