webpack开发环境打包卡住

webpack开发环境打包卡住

2022年07月12日 阅读:8 字数:451 阅读时长:1 分钟

webpack v4版本开发环境编译卡住,打包进度不动问题排查

1、问题现象

项目使用vue-cli@4.4.6版本,一天拉取完最新代码,运行vue-cli-service serve,打包进度到67%~69%就会卡住,光标一直停留在那

71d1e219f18838f8.png

2、排查过程

1、首先查看git提交记录,看下最近更新了什么,主要看依赖、webpack相关的更新。

发现vue-cli配置没有更新,所以先排除打包配置问题,最近更新了ESlint,添加了prettier做代码格式校验

"@babel/eslint-parser": "^7.12.16",
"@vue/cli-plugin-babel": "~4.4.6",
"@vue/cli-plugin-eslint": "~4.4.6",
"@vue/cli-plugin-unit-jest": "~4.4.6",
"@vue/cli-service": "~4.4.6",
"eslint": "^7.32.0",
"eslint-config-prettier": "^8.3.0",
"eslint-plugin-vue": "^8.0.3",
"prettier": "^2.4.1"

.eslintrc.js

module.exports = {
  root: true,
  env: {
    node: true
  },
  extends: [
    'plugin:vue/essential',
    'plugin:vue/recommended',
    'eslint:recommended',
    'plugin:prettier/recommended'
  ],
  parserOptions: {
    parser: '@babel/eslint-parser'
  },
  rules: {
    'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
    'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off'
  }
}

2、排查是不是ESlint和prettier的问题

使用最小系统法,取消所有路由的加载,再一个个引入

经排查是卡在ES扫描vendor目录中的第三方库dplayer、ezuikit。这些第三方库因为要修改一些代码,所以直接使用release构建好的版本,基本都是压缩过的min.js。

e116d8d4687b55ef.png

可能是prettier的问题,ES去掉prettier就正常了,但是prettier还是有必要的,对团队的代码格式风格做限制。

所以从另一个方面考虑,就是不让ESlint扫描这些文件,之前都是在这些min.js文件头部加上/* -disable */的,所以试着加到.eslintignore文件里面,结果就可以了

.eslintignore

dist
src/assets
src/vendor/ezuikit.js
src/vendor/dplayer/*.js

3、总结

1、vue-cli开发环境会用@vue/cli-plugin-,并生成-loader缓存,有时候需要删除node_modules下的.cache目录才能复现问题

2、第三方库(vendor)如果要禁用,建议配置到.ignore,而不是单文件添加/* -disable */

 

推荐阅读

恰饭区

评论区 0

0/500

还没有评论,快来抢第一吧