vue.js - 在使用 VueJS 热重载期间，Webpack 在“95% 发出 CopyPlugin”时很慢

Question

在热重载期间，Webpack 会卡住95% emitting CopyPlugin几秒钟。

我的公共文件夹中有很多文件，主要是图像（大约 1GB），它们必须显示在我的 VueJS 应用程序上。如果我删除它们，我不再有问题。

这是我的package.json依赖项：

{ 
  ...
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  },
  "dependencies": {
    "core-js": "^3.6.4",
    "register-service-worker": "^1.7.1",
    "vue": "^2.6.11",
    "vue-router": "^3.1.6"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "~4.3.0",
    "@vue/cli-plugin-eslint": "~4.3.0",
    "@vue/cli-plugin-pwa": "~4.3.0",
    "@vue/cli-plugin-router": "~4.3.0",
    "@vue/cli-service": "~4.3.0",
    "babel-eslint": "^10.1.0",
    "eslint": "^6.7.2",
    "eslint-plugin-vue": "^6.2.2",
    "sass": "^1.26.3",
    "sass-loader": "^8.0.2",
    "vue-template-compiler": "^2.6.11"
  }
}

这是我的 vue.config.js 文件：

const path = require("path");

function resolveSrc(_path) {
  return path.join(__dirname, _path);
}
// vue.config.js
module.exports = {
  lintOnSave: true,
  configureWebpack: {
    // Set up all the aliases we use in our app.
    resolve: {
      alias: {
        assets: resolveSrc("src/assets"),
      },
    },
    output: {
      chunkFilename: "[id].[hash].js",
      crossOriginLoading: "anonymous",
      filename: "[name].[hash].js",
      path: path.resolve(__dirname, "dist"),
    }
  },

  css: {
    // Enable CSS source maps.
    sourceMap: process.env.NODE_ENV !== "production",
  },
};

我本来希望 Webpack 缓存我的公共文件，而不是在每次重新加载时再次复制它们。也许有办法配置它，但是我对Webpack和vue-cli没有很好的了解。如果有人有解决方案来缓存/加速我的应用程序的热重载，那就太好了，非常感谢！

标签： vue.jswebpackvue-cli