解决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) { %> <% } %>

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

175

176

177

178

179

180

181

182

183

184

185

186

187

188

189

190

191

192

193

194

195

196

197

198

199

200

201

202

203

204

205

206

207

208

209

210

211

212

213

214

215

216

217

218

219

220

221

222

223

224

225

226

227

228

229

230

231

232

233

234

235

236

237

238

239

240

241

242

243

244

245

246

247

248

249

250

251

252

253

254

255

256

257

258

259

260

261

262

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()
    ]
  }
  },
 
}