vue项目配置打包优化 gzip压缩 更改输出js img css文件名 cdn加速

vue config文件

配置全局cdn加速

const CompressionWebpackPlugin = require('compression-webpack-plugin')
// "compression-webpack-plugin": "^5.0.2",
const cdnDependencies = require('./cdn')
const HtmlInjectConfigPlugin = require('./src/plugins/html-inject-config-plugin')
const { chain, set, each } = require('lodash')
//"lodash": "^4.17.21",
// const MiniCssExtractPlugin = require("mini-css-extract-plugin"); //自定义输出css文件名 
/* 是否启动Gzip */
const enableGzip = process.env.VUE_APP_GZ === 'true'
/* 是否启动CDN */
const enableCDN = process.env.VUE_APP_CDN === 'true'

/* ========= CDN 处理 ============= */

/* 设置不参与构建的库 */
const externals = {}
let cdn = {}
if (enableCDN) {
  cdnDependencies.forEach(pkg => { externals[pkg.name] = pkg.library })
  /* 引入文件的 cdn 链接 */
  cdn = {
    css: cdnDependencies.map(e => e.css).filter(e => e),
    js: cdnDependencies.map(e => e.js).filter(e => e)
  }
}
/* ============ CDN end========== */
const pages = undefined
module.exports = {
  publicPath: './',
  outputDir: 'dist',
  productionSourceMap: false,
  devServer: {
    disableHostCheck: true,
    proxy: {
      // '/api2': {
      //   target: '',
      //   changeOrigin: true,
      //   ws: true,
      //   pathRewrite: {
      //     '^/api2': ''
      //   }
      // },
      '/api': {
        target: '',
        changeOrigin: true,
        ws: true,
        pathRewrite: {
          '^/api': ''
        }
      }
    }
  },
  lintOnSave: false, // 取消 eslint 验证
  configureWebpack: config => {
    const configNew = {}
    configNew.externals = externals
    if (enableGzip) {
      configNew.plugins = [
        // gzip
        new CompressionWebpackPlugin({
          filename: '[path].gz[query]',
          test: new RegExp('\\.(' + ['js', 'css'].join('|') + ')$'),
          threshold: 10240,
          minRatio: 0.8,
          deleteOriginalAssets: false
        }),
        
      ]
    }
    return configNew
  },
    //开启下面 可以自定义js文件名 css文件名 
  // configureWebpack: {
  //   output: { // 输出重构  打包编译后的 文件名称  【模块名称.版本号.js】
  //     filename: `myjs/[name].js`,
  //     chunkFilename: `myjs/[name].js`,
  //   },
  //   plugins: [
  //     new MiniCssExtractPlugin({
  //       // 修改打包后css文件名
  //       filename: `mycss/[name].css`,
  //       chunkFilename: `mycss/[name].css`
  //     })
  //   ]
  // },
  chainWebpack: config => {
      //开启下面 可以自定义img名字
    // config.module
    // .rule("images")
    // .use("url-loader")
    // .tap(options => {
    //   options.name = `myimg/[name].[ext]`;
    //   options.fallback = {
    //     loader: "file-loader",
    //     options: {
    //       name: `myimg/[name].[ext]`
    //     }
    //   };
    //   return options;
    // })
    const htmlPluginNames = chain(pages).keys().map(page => 'html-' + page).value()
    const targetHtmlPluginNames = htmlPluginNames.length ? htmlPluginNames : ['html']
    each(targetHtmlPluginNames, name => {
      config.plugin(name).tap(options => {
        set(options, '[0].cdn', cdn)
        return options
      })
    })
    // 在html文件注入配置文件
    config.plugin('HtmlInjectCohtmlnfigPlugin').use(HtmlInjectConfigPlugin, ['./'])
  }
}

cdn配置js

module.exports = [
  { name: 'vue', library: 'Vue', js: 'https://cdn.jsdelivr.net/npm/vue@2.6.11/dist/vue.min.js', css: '' },
  { name: 'vant', library: 'vant', js: 'https://cdn.jsdelivr.net/npm/vant@2.12/lib/vant.min.js', css: 'https://cdn.jsdelivr.net/npm/vant@2.12/lib/index.css' },
  { name: 'vuex', library: 'Vuex', js: 'https://cdn.jsdelivr.net/npm/vuex@3.2.0/dist/vuex.min.js', css: '' },
  { name: 'vue-router', library: 'VueRouter', js: 'https://cdn.jsdelivr.net/npm/vue-router@3.1.6/dist/vue-router.min.js', css: '' },
  { name: 'qs', library: 'Qs', js: 'https://cdn.jsdelivr.net/npm/qs@6.9.1/dist/qs.js', css: '' },
  { name: 'axios', library: 'axios', js: 'https://cdn.jsdelivr.net/npm/axios@0.19.0/dist/axios.min.js', css: '' },
  { name: 'lodash', library: '_', js: 'https://cdn.jsdelivr.net/npm/lodash@4.17.15/lodash.min.js', css: '' },
  { name: 'nprogress', library: 'NProgress', js: 'https://cdn.jsdelivr.net/npm/nprogress@0.2.0/nprogress.min.js', css: 'https://cdn.jsdelivr.net/npm/nprogress@0.2.0/nprogress.css' }
]

index.html

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <!-- <meta name="viewport"
  content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,
  user-scalable=no,minimal-ui"/> -->
  <meta
  name="viewport"
  content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"
/>
 <link rel="icon" href="<%= BASE_URL %>favicon.ico">
  <title>
    <%= VUE_APP_TITLE %>
  </title>
  <!-- 使用 CDN 加速的 CSS 文件，配置在 vue.config.js 下 -->
  <% for (var i in htmlWebpackPlugin.options.cdn&&htmlWebpackPlugin.options.cdn.css) { %>
    <link href="<%= htmlWebpackPlugin.options.cdn.css[i] %>" rel="stylesheet">
    <% } %>
      <!-- 使用 CDN 加速的 js 文件，配置在 vue.config.js 下 -->
      <% for (var i in htmlWebpackPlugin.options.cdn&&htmlWebpackPlugin.options.cdn.js) { %>
        <script src="<%= htmlWebpackPlugin.options.cdn.js[i] %>"></script>
        <% } %>
</head>

<body>
  <noscript>
    <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled.
        Please enable it to continue.</strong>
  </noscript>
  <div id="app"></div>
  <!-- built files will be auto injected -->
  <!-- 使用 CDN 加速的 js 文件，配置在 vue.config.js 下 -->
  <% for (var i in htmlWebpackPlugin.options.cdn&&htmlWebpackPlugin.options.cdn.js) { %>
    <script src="<%= htmlWebpackPlugin.options.cdn.js[i] %>"></script>
    <% } %>
</body>

</html>

html注入文件

/**
 *在html文件注入配置文件
 *
 * @example
 * new HtmlInjectConfig()
 */
/**
 * @class
 */
class HtmlInjectConfigPlugin {
  /**
   * 构造函数
   */
  constructor (baseUrl = '') {
    this.files = [baseUrl + 'config.js']
  }

  apply (compiler) {
    compiler.hooks.compilation.tap('HtmlInjectConfigPlugin', compilation => {
      compilation.hooks.htmlWebpackPluginBeforeHtmlProcessing.tapAsync('HtmlInjectConfig', (data, callback) => {
        data.assets.js = this.files.concat(data.assets.js)
        callback(null, data)
      })
    })
  }
}

module.exports = HtmlInjectConfigPlugin

.env 文件

配置env即可配置gz压缩和cdn

# 所有环境默认

# ========base api======================

VUE_APP_BASE_API = ''

# 页面 title 前缀
VUE_APP_TITLE= ''

# 是否启用gz压缩
VUE_APP_GZ = false

# 是否启用CDN
VUE_APP_CDN = false