做本地网站赚钱吗？,域名注册服务商网站,wordpress广告位代码,wordpress安装完成后卸载最近给公司采购的老旧的 node8 vue2.6 webpack3 npm 项目做构建优化
背景#xff1a;整个项目 build 一次 20 min #xff0c;本地冷启动和热更新也忒慢#xff0c;依赖 npm i 一下也得装个 20 min
众所周知#xff0c;Node 版本#xff0c;依赖包管理工具 和 构建工…最近给公司采购的老旧的 node8 vue2.6 webpack3 npm 项目做构建优化
背景整个项目 build 一次 20 min 本地冷启动和热更新也忒慢依赖 npm i 一下也得装个 20 min
众所周知Node 版本依赖包管理工具 和 构建工具 的升级都能对构建速度的优化有帮助
Node
我先给 node 版本升到了 16.20这个版本算是稳定能用 pnpm8 的版本了也在公司统一的 node 大版本范围里解决问题就是把配套的报错的依赖升级到和 node 版本匹配主要是 sass, vue/cli-service
依赖包管理工具
再给 pnpm8 加上这里的问题碰见的是项目里有些依赖项之前没有显性安装导致 package.json 里缺失了可见旧版本的 npm 确实有点毛病从 package-lock.json 里逐个查到报错依赖的版本再手动装上就行了
构建工具
对比
项目越大vite 带来的构建优化增益就越明显webpack 即使用 esbuild 再开上线程和缓存在海量项目文件面前全量构建也是慢的不得了。换上 vite开发冷启动的预构建和访问构建慢一些可比 webpack 快多了热更新更是秒更快乐的不得了
vue2.7
这里要解决的问题是 vite 没有直接支持 vue2 版本但还好找到了 vue2 的支持插件 vitejs/plugin-vue2因为插件好像不支持 2.6 版本所以一开始找的社区提供的插件有点坑但后来想大换血干脆换的彻底点vue3 是不要想了2.6 2.7(latest) 还是可以的所以连带着把 vue 版本也往上提了提但一些 vue2.7 被废弃的语法就要改动下了但还好比较少全局批量换掉检查一遍
兼容
然后就是 vite 没有提供 node-polyfillvite-plugin-node-polyfills 解决也没有 requireoriginjs/vite-plugin-require-context 解决
还有就是 webpack 里用的是 process.env.xxx编译时会从环境变量里找到值填充到逻辑里而 vite 里没有提供 process而通过 vite 配置里 define loadEnv 也就解决了
动态加载
比较有意思的一个问题是我们有个动态加载页面和组件进行渲染的逻辑
return () require(path) // path views/x.vuevite 里只能替换成以下写法了
// { views/x.vue: () import(views/x.vue), views/y.vue: () import(views/y.vue) }
const views import.meta.glob(/views/**/**.vue)// 直接从 views 里找到该页面/组件返回就行
return views[path]预构建
因为 vite 是增量构建有时切换页面会碰见数量比较大的依赖文件增量构建就会导致页面整个自动强制刷新这对开发带来非常不好的体验我们比较倾向于无感知的热更新因此就需要在 vite 构建配置里着重声明 optimizeDeps include 选项最好把所有让页面强刷的依赖都进行预构建就可以解决这个问题了
