vue-cli-servic build 打包后生成非常多的js和css文件,怎么办?

作者站长头像
站长
· 阅读数 6

我的一个单页面的后台管理系统,用的是vue-cli3开发的,之前打包都正常vue-cli-servic build 打包后生成非常多的js和css文件,怎么办?

我本地的也正常,前一阵子打开正式环境发现一打开加载了1700多个请求,人都傻了,发现除了我本地打包的和jenkins测试环境打包的都没问题,就正式环境有问题,然后突发奇想吧测试库的代码删除重新拉取,问题复现了,我复制了本地代码除了node_modules,重新打包也复现了,我实在找不出原因,有大佬遇到过吗?我没碰vue.config.jsvue-cli-servic build 打包后生成非常多的js和css文件,怎么办?vue-cli-servic build 打包后生成非常多的js和css文件,怎么办?vue-cli-servic build 打包后生成非常多的js和css文件,怎么办?vue-cli-servic build 打包后生成非常多的js和css文件,怎么办?我人都麻了1370个文件什么都没动就这样子文件太多了截不全

vue.config.js

const path = require('path')
const os = require('os')
const CompressionPlugin = require('compression-webpack-plugin')

function resolve (dir) {
  return path.join(__dirname, dir)
}

let localIp = '127.0.0.1'
const ni = os.networkInterfaces()
for (let key in ni) {
  const item = ni[key]
  const ip = item.find(i => i.family === 'IPv4')
  localIp = ip.address
  break
}

// vue.config.js
module.exports = {
  transpileDependencies: [/^((?!@jeecg).)*((?!@jeecg).)*$/],
  /*
Vue-cli3:
Crashed when using Webpack `import()` #2463
https://github.com/vuejs/vue-cli/issues/2463
*/
  // 如果你不需要生产环境的 source map,可以将其设置为 false 以加速生产环境构建。
  productionSourceMap: false,
  // 打包app时放开该配置
  // publicPath: './',
  configureWebpack: config => {
    // 生产环境取消 console.log
    if (process.env.NODE_ENV === 'production') {
      config.optimization.minimizer[0].options.terserOptions.compress.drop_console = true
      // 拆分打包
      const SplitChunk = config.optimization.splitChunks
      SplitChunk.cacheGroups.antv = {
        name: 'antv',
        test: /[\\/]node_modules[\\/]@antv[\\/]/,
        minChunks: 1,
        priority: -3,
        chunks: 'all',
        reuseExistingChunk: true
      }
      SplitChunk.cacheGroups.tinymce = {
        name: 'tinymce',
        test: /[\\/]node_modules[\\/]tinymce[\\/]/,
        minChunks: 1,
        priority: -4,
        chunks: 'all',
        reuseExistingChunk: true
      }
      SplitChunk.cacheGroups.lodash = {
        name: 'lodash',
        test: /[\\/]node_modules[\\/]lodash[\\/]/,
        minChunks: 1,
        priority: -2,
        chunks: 'all',
        reuseExistingChunk: true
      }
      SplitChunk.cacheGroups.codemirror = {
        name: 'codemirror',
        test: /[\\/]node_modules[\\/]codemirror[\\/]/,
        minChunks: 1,
        priority: -1,
        chunks: 'all',
        reuseExistingChunk: true
      }
    }
  },
  chainWebpack: (config) => {
    config.resolve.alias
      .set('@$', resolve('src'))
      .set('@mock', resolve('mock'))
      .set('@api', resolve('src/api'))
      .set('@assets', resolve('src/assets'))
      .set('@comp', resolve('src/components'))
      .set('@views', resolve('src/views'))
      .set('@layout', resolve('src/layout'))

    // 生产环境,开启js\css压缩
    if (process.env.NODE_ENV === 'production') {
      config.plugin('compressionPlugin').use(new CompressionPlugin({
        test: /\.(js|css|less)$/, // 匹配文件名
        threshold: 10240, // 对超过10k的数据压缩
        deleteOriginalAssets: false // 不删除源文件
      }))
    }

    // 配置 webpack 识别 markdown 为普通的文件
    config.module
      .rule('markdown')
      .test(/\.md$/)
      .use()
      .loader('file-loader')
      .end()
  },
  css: {
    loaderOptions: {
      less: {
        modifyVars: {
          /* less 变量覆盖,用于自定义 ant design 主题 */
          'primary-color': '#1890FF',
          'link-color': '#1890FF',
          'border-radius-base': '4px'
        },
        javascriptEnabled: true
      }
    }
  },
  devServer: {
    host: '0.0.0.0',
    port: 3000,
    public: `${localIp}:3000`,
    disableHostCheck: true
  },
  lintOnSave: false
}

package.json

{
  "name": "vue-antd-jeecg",
  "version": "2.1.4",
  "private": true,
  "scripts": {
    "pre": "cnpm install || yarn --registry https://registry.npm.taobao.org || npm install --registry https://registry.npm.taobao.org ",
    "serve": "vue-cli-service serve --mode local",
    "serve:dev": "vue-cli-service serve --mode dev",
    "build:dev": "vue-cli-service build --mode dev",
    "build:prod": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  },
  "dependencies": {
    "@antv/data-set": "^0.10.2",
    "@jeecg/antd-online-214": "^2.1.41",
    "@tinymce/tinymce-vue": "^2.0.0",
    "@vant/touch-emulator": "^1.2.0",
    "ant-design-vue": "^1.7.8",
    "axios": "^0.18.0",
    "babel-plugin-dynamic-import-node": "^2.3.3",
    "clipboard": "^2.0.4",
    "codemirror": "^5.46.0",
    "dayjs": "^1.8.0",
    "dingtalk-jsapi": "^2.9.14",
    "enquire.js": "^2.1.6",
    "file-saver": "2.0.1",
    "js-cookie": "^2.2.0",
    "jsbarcode": "^3.11.5",
    "lodash.debounce": "^4.0.8",
    "lodash.get": "^4.4.2",
    "lodash.isequal": "^4.5.0",
    "lodash.pick": "^4.4.0",
    "md5": "^2.2.1",
    "nprogress": "^0.2.0",
    "qrcodejs2": "^0.0.2",
    "sortablejs": "^1.13.0",
    "tinymce": "^5.1.4",
    "vant": "^2.12.23",
    "viser-vue": "^2.4.4",
    "vue": "^2.6.10",
    "vue-class-component": "^6.0.0",
    "vue-cropper": "^0.4.8",
    "vue-draggable-resizable": "^2.3.0",
    "vue-i18n": "^8.17.3",
    "vue-loader": "^15.7.0",
    "vue-ls": "^3.2.0",
    "vue-photo-preview": "^1.1.3",
    "vue-print-nb": "^1.7.5",
    "vue-print-nb-jeecg": "^1.0.9",
    "vue-property-decorator": "^7.3.0",
    "vue-router": "^3.0.1",
    "vue-splitpane": "^1.0.4",
    "vuedraggable": "^2.24.3",
    "vuex": "^3.0.1",
    "vuex-class": "^0.3.1",
    "vxe-table": "^3.6.6",
    "xe-clipboard": "^1.10.1",
    "xe-utils": "^3.5.7",
    "xlsx": "0.14.1"
  },
  "devDependencies": {
    "@babel/polyfill": "^7.12.1",
    "@babel/runtime": "^7.18.6",
    "@types/file-saver": "2.0.1",
    "@vue/cli-plugin-babel": "^3.3.0",
    "@vue/cli-plugin-eslint": "^3.3.0",
    "@vue/cli-service": "^3.3.0",
    "@vue/eslint-config-standard": "^4.0.0",
    "babel-eslint": "^10.0.1",
    "babel-plugin-import": "^1.13.0",
    "compression-webpack-plugin": "^3.1.0",
    "eslint": "^5.16.0",
    "eslint-plugin-vue": "^5.1.0",
    "html-webpack-plugin": "^4.0.0-beta.11",
    "less": "^3.9.0",
    "less-loader": "^4.1.0",
    "mockjs": "^1.1.0",
    "vue-template-compiler": "^2.6.10"
  },
  "eslintConfig": {
    "root": true,
    "env": {
      "node": true
    },
    "extends": [
      "plugin:vue/strongly-recommended",
      "@vue/standard"
    ],
    "parserOptions": {
      "parser": "babel-eslint"
    },
    "rules": {
      "generator-star-spacing": "off",
      "no-mixed-operators": 0,
      "vue/max-attributes-per-line": [
        2,
        {
          "singleline": 5,
          "multiline": {
            "max": 1,
            "allowFirstLine": false
          }
        }
      ],
      "vue/attribute-hyphenation": 0,
      "vue/html-self-closing": 0,
      "vue/component-name-in-template-casing": 0,
      "vue/html-closing-bracket-spacing": 0,
      "vue/singleline-html-element-content-newline": 0,
      "vue/no-unused-components": 0,
      "vue/multiline-html-element-content-newline": 0,
      "vue/no-use-v-if-with-v-for": 0,
      "vue/html-closing-bracket-newline": 0,
      "vue/no-parsing-error": 0,
      "no-console": 0,
      "no-tabs": 0,
      "indent": [
        1,
        4
      ]
    }
  },
  "postcss": {
    "plugins": {
      "autoprefixer": {}
    }
  },
  "browserslist": [
    "> 1%",
    "last 2 versions",
    "not ie <= 10"
  ]
}
回复
1个回答
avatar
test
2024-06-27

找到解决办法了

config.optimization.delete('splitChunks')
config.plugin('limitChunkCountPlugin').use(webpack.optimize.LimitChunkCountPlugin, [{
    maxChunks: 7
}])

很懵,真的什么都没动就出现这种问题。。。。如果你也遇到了记得删除掉splitChunks,我这边不删掉会出现main文件不执行导致app没挂载的问题

回复
likes
适合作为回答的
  • 经过验证的有效解决办法
  • 自己的经验指引,对解决问题有帮助
  • 遵循 Markdown 语法排版,代码语义正确
不该作为回答的
  • 询问内容细节或回复楼层
  • 与题目无关的内容
  • “赞”“顶”“同问”“看手册”“解决了没”等毫无意义的内容