在开始之前先上图
升级之前：
打包时间 2238.40s 半个多小时快40分钟，这不是电脑配置低的问题，其他同事打包最快也要半个小时左右
打包后的压缩体积
升级之后：
没有缓存的的情况下第一次打包
第二次打包 有缓存
压缩体积，这个参考意义不大，因为后面又改了一些功能，但比原来的缩小了是肯定的。
变化显著啊。。。。。
简单介绍
当第一次到到公司时，安排改到该项目，改的问题很简单结果改完打包要半个小时简直是不敢相信，当别人下班前一个小时给你安排了一个小小任务，本来几分钟就能完事走人，结果呢起服务要10多20分钟，打包要半个小时，这要什么时候才下班啊。。。
于是就开始研究如何提升效率，顺便说一句当时的webpack最高版本是4.X，由于当时任务繁重，业务繁忙，没有时间折腾，又 考虑到项目太大，更新频繁等，到后来这项目基本停滞不动，公司当任务重心放到其他项目上，该项目就这样让其沉睡。。。
直到前几个月，是时候表演一下了。
老项目的结构
对了这是vue的项目，node一直使用8.11.4
文件结构
├── build
├── config
├── dist
├── index.ejs
├── index.html
├── node_modules
├── package.json
├── src
├── static
├── yarn-error.log
└── yarn.lock
又臭又长的package.json 配置
"dependencies": {
"axios": "^0.15.3",
"babel-polyfill": "^6.23.0",
"crypto-js": "^3.3.0",
"echarts": "^4.2.1",
"element-ui": "1.3.6",
"handsontable": "^0.35.0",
"iview": "^2.0.0-rc.8",
"jquery": "^3.2.1",
"nyan-progress-webpack-plugin": "^1.2.0",
"videojs-contrib-hls": "^5.8.3",
"vue": "^2.2.2",
"vue-ambuf-fullcalendar": "^1.0.21",
"vue-awesome-swiper": "^2.5.4",
"vue-cookie": "^1.1.4",
"vue-draggable-resizable": "^1.5.1",
"vue-fullcalendar": "^1.0.9",
"vue-pdf": "^1.2.4",
"vue-quill-editor": "^2.2.1",
"vue-router": "^2.2.0",
"vue-ueditor": "^0.1.3",
"vue-video-player": "^4.0.0",
"vuex": "^2.2.1",
"xlsx": "0.10.5"
},
"devDependencies": {
"autoprefixer": "^6.7.2",
"babel-core": "^6.22.1",
"babel-helper-vue-jsx-merge-props": "2.0.2",
"babel-loader": "^6.2.10",
"babel-plugin-syntax-jsx": "6.18.0",
"babel-plugin-transform-runtime": "^6.22.0",
"babel-plugin-transform-vue-jsx": "3.4.2",
"babel-preset-env": "^1.2.1",
"babel-preset-es2015": "6.24.1",
"babel-preset-stage-2": "^6.22.0",
"babel-register": "^6.22.0",
"chalk": "^1.1.3",
"connect-history-api-fallback": "^1.3.0",
"copy-webpack-plugin": "^4.0.1",
"css-loader": "^0.26.1",
"eventsource-polyfill": "^0.9.6",
"express": "^4.14.1",
"extract-text-webpack-plugin": "^2.0.0",
"file-loader": "^0.10.0",
"friendly-errors-webpack-plugin": "^1.1.3",
"function-bind": "^1.1.0",
"html-webpack-plugin": "^2.28.0",
"http-proxy-middleware": "^0.17.3",
"node-sass": "^4.5.3",
"opn": "^4.0.2",
"optimize-css-assets-webpack-plugin": "^1.3.0",
"ora": "^1.1.0",
"rimraf": "^2.6.0",
"sass-loader": "6.0.3",
"semver": "^5.3.0",
"speed-measure-webpack-plugin": "1.3.1",
"url-loader": "^0.5.7",
"vue-loader": "^11.1.4",
"vue-style-loader": "^2.0.0",
"vue-template-compiler": "^2.2.4",
"webpack": "^2.2.1",
"webpack-bundle-analyzer": "^2.2.1",
"webpack-dev-middleware": "^1.10.0",
"webpack-hot-middleware": "^2.16.1",
"webpack-merge": "^2.6.1"
}
操作流程
简单粗暴，如vuecli版本太低先 升级到@vue/cli 5.0.1
然后
vue create ****脚手架创建一个vue项目
- 将老项目中的src文件夹复制替换创建好的src文件夹
- 创建public文件夹
- 将原来static文件夹复制到public文件夹下
- 替换package.json文件内容
- .babelrc 替换为 babel.config.js
- 原来的webpack配置文件都在 ./build 下，现在需要将它和 vue.config.js关联，这一步需一些时间
以上一切准备就绪后就可以先执行一遍yarn
安装你原来的依赖，这里可能出现一些依赖版本过低，和node版本不兼容等
如果安装成功后就可以执行 yarn serve
此时你可能会看到数不尽的错误，一步一步来都是可以解决的，
我遇到的问题
原来的部分依赖包可能需要升级，或者有的已经用不上，后面我会放上我升级后的package.json配置文件
下面是一个警告比较常见的解决办法是vue.config.js中添加了如下代码
module.exports = defineConfig({
.....
css: {
extract: {
ignoreOrder: true // 打包时出现的警告
}
}
})
下面是至今存在的问题，有大佬知道的请指教
另外由于项目太大，每次编译都会出现内存溢出问题
最后解决办法是 在 server 和 build中添加 node_modules/@vue/cli-service/bin/vue-cli-service.js serve
"scripts": {
"serve": "node --max_old_space_size=4096 node_modules/@vue/cli-service/bin/vue-cli-service.js serve",
"build": "node --max_old_space_size=4096 node_modules/@vue/cli-service/bin/vue-cli-service.js build"
},
另外将原来使用的 百度富文本编辑器ueditor替换为tinymce
其他还遇到不少问题，就不一 一列举了
总结就是如果你还再使用webpack2.几的项目 赶紧升级吧，非常有必要；
下面是升级后的 package.json 配置内容
"dependencies": {
"axios": "^0.15.3",
"babel-polyfill": "^6.23.0",
"core-js": "^3.8.3",
"crypto-js": "3.3.0",
"echarts": "^4.2.1",
"element-ui": "^1.4.13",
"handsontable": "^0.35.0",
"iview": "^2.0.0-rc.8",
"jquery": "^3.2.1",
"videojs-contrib-hls": "^5.8.3",
"vue": "^2.6.14",
"vue-ambuf-fullcalendar": "^1.0.21",
"vue-awesome-swiper": "^2.5.4",
"vue-cookie": "^1.1.4",
"vue-draggable-resizable": "^1.5.1",
"vue-fullcalendar": "^1.0.9",
"vue-pdf": "4.2.0",
"vue-quill-editor": "^2.2.1",
"vue-router": "^3.5.1",
"vue-ueditor": "^0.1.3",
"vue-video-player": "^4.0.0",
"vuex": "^3.6.2",
"xlsx": "0.10.5"
},
"devDependencies": {
"@vue/cli-plugin-babel": "~5.0.0",
"@vue/cli-plugin-router": "~5.0.0",
"@vue/cli-plugin-vuex": "~5.0.0",
"@vue/cli-service": "~5.0.0",
"autoprefixer": "^6.7.2",
"babel-core": "^6.22.1",
"babel-helper-vue-jsx-merge-props": "2.0.2",
"babel-loader": "^6.2.10",
"babel-plugin-transform-runtime": "^6.22.0",
"babel-plugin-transform-vue-jsx": "3.4.2",
"babel-preset-env": "^1.7.0",
"babel-register": "^6.22.0",
"compression-webpack-plugin": "^10.0.0",
"copy-webpack-plugin": "^4.0.1",
"css-loader": "^6.7.1",
"file-loader": "^0.10.0",
"node-polyfill-webpack-plugin": "1.1.4",
"node-sass": "6.0.1",
"path-browserify": "^1.0.1",
"pdfjs-dist": "2.7.570",
"sass-loader": "^10.0.1",
"url-loader": "^0.5.7",
"uglifyjs-webpack-plugin": "^2.2.0",
"vue-loader": "^11.1.4",
"vue-style-loader": "^2.0.0",
"vue-template-compiler": "^2.6.14"
}
升级后的目录结构
├── README.md
├── babel.config.js
├── config
├── dist
├── jsconfig.json
├── node_modules
├── package.json
├── public
├── src
├── vue.config.js
└── yarn.lock
以上，初略记录一下
也是我的掘金第一篇文章
