vue优化，vue.config.js的配置

原创已于 2022-02-12 10:15:11 修改 · 651 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript #前端

于 2022-02-12 10:14:12 首次发布

本文详细介绍了如何在Vue.js项目中配置CDN以加速页面加载，包括设置externals、压缩插件、公共代码抽离等。同时，展示了在webpack配置文件中的具体代码实现，以及在index.html中引入CDN资源的方式，旨在提高应用性能。

直接上代码：

// const proxy = require("http-proxy-middleware");
const CompressionPlugin = require("compression-webpack-plugin");
const webpack = require("webpack");
const cdn = {
  // 忽略打包的第三方库
  externals: {
    vue: "Vue",
    vuex: "Vuex",
    "vue-router": "VueRouter",
    axios: "axios",
    "element-ui": "ELEMENT",
    "vue-i18n": "VueI18n",
    $: "jquery",
    jQuery: "jquery",
    "window.jQuery": "jquery",
    Popper: ["popper.js", "default"]
    // xlsx: "XLSX"
  },

  // 通过cdn方式使用
  js: [
    "https://cdn.bootcdn.net/ajax/libs/vue/2.6.14/vue.js",
    "https://cdn.bootcss.com/vue-router/3.1.2/vue-router.min.js",
    "https://cdn.bootcss.com/vuex/3.1.2/vuex.min.js",
    "https://cdn.bootcss.com/axios/0.19.2/axios.min.js",
    // jquery
    "https://cdn.bootcss.com/jquery/3.3.1/jquery.js",
    // element-ui js
    "https://cdn.bootcss.com/element-ui/2.13.0/index.js",
    //
    "https://cdn.bootcss.com/vue-i18n/8.15.0/vue-i18n.min.js"
    //
    // "https://cdn.bootcdn.net/ajax/libs/xlsx/0.14.5/xlsx.min.js"
  ],
  css: [
    "https://cdn.bootcss.com/element-ui/2.13.0/theme-chalk/index.css",
    "https://at.alicdn.com/t/font_2377146_umrv82fddxb.css"
  ]
};
module.exports = {
  lintOnSave: false, // 关闭eslint
  publicPath: "./",
  chainWebpack: config => {
    // 配置cdn引入
    config.plugin("html").tap(args => {
      args[0].cdn = cdn;
      return args;
    });
    // 当环境变量user_analyzer为true使用
    if (process.env.use_analyzer) {
      config
        .plugin("webpack-bundle-analyzer")
        .use(require("webpack-bundle-analyzer").BundleAnalyzerPlugin);
    }
  },
  configureWebpack: config => {
    config.externals = cdn.externals;
    // 生产环境下
    if (process.env.NODE_ENV === "production") {
      // 公共代码抽离
      config.optimization = {
        // 分割代码块
        splitChunks: {
          cacheGroups: {
            //公用模块抽离
            common: {
              chunks: "initial",
              minSize: 0, //大于0个字节
              minChunks: 2 //抽离公共代码时，这个代码块最小被引用的次数
            },
            //第三方库抽离
            vendor: {
              priority: 1, //权重
              test: /node_modules/,
              chunks: "initial",
              minSize: 0, //大于0个字节
              minChunks: 2 //在分割之前，这个代码块最小应该被引用的次数
            }
          }
        }
      };
    }
    // 生产环境下启用gzip
    if (process.env.NODE_ENV === "production") {
      return {
        plugins: [
          new CompressionPlugin({
            algorithm: "gzip",
            test: /\.(js|css)(\?.*)?$/i, // 需要压缩的文件正则
            threshold: 10240, // 对超过10k的数据进行压缩
            minRatio: 0.8, // 只有压缩率小于这个值的资源才会被处理
            deleteOriginalAssets: false // 是否删除原文件
          })
        ]
      };
    }
    [
      new webpack.ProvidePlugin({
        $: "jquery",
        jquery: "jquery",
        jQuery: "jquery",
        "window.jQuery": "jquery"
      })
    ];
  },

  runtimeCompiler: true,
  productionSourceMap: false, // 如果你不需要生产环境的 source map，可以将其设置为 false 以加速生产环境构建。
  // css: {
  //   extract: true,
  //   requireModuleExtension: false
  // }
  devServer: {
    port: 8089,
    proxy: {
      // "/": {
      //   target: "http://*******",
      //   changeOrigin: true
      // }
    }
  }
};

在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.0">
    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
   
    <title><%= htmlWebpackPlugin.options.title %></title>
    <link rel="stylesheet" href="//at.alicdn.com/t/font_2228877_yqhtfstcjzm.css">
    <% for(var css of htmlWebpackPlugin.options.cdn.css) { %>
      <link href="<%=css%>" rel="preload" as="style">
      <link rel="stylesheet" href="<%=css%>" as="style">
    <% } %>
    <% for(var js of htmlWebpackPlugin.options.cdn.js) { %>
      <!-- <link href="<%=js%>" rel="preload" as="script"> -->
      <script src="<%=js%>"></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>
  </body>
</html>