vue3.0 发布至今也有一段时间了, 你是否已经拄着拐杖开始成盒之旅了呢? vue3.0 确实比 vue 2.0 轻快了不少, 更小的体积, 更高效率的数据劫持, 更快的节点渲染.
另外还有更好的IDE智能联想, 这取决于vue3.0 的代码采用 TypeScript 编写, 这也决定了开发时更少的Bug, 以及能保留更多的头发.
此外vue团队还开发了 vite web开发工具, 利用浏览器ESM特性实现动态驱动开发, 遇到 import 的时候就会触发文件加载, 无需启动时分析资源依赖.
打包处理机制
- 在开发时浏览器由于ESM特性加载对应的资源, vite只需负责处理由浏览器发起请时的文件, 经过层层处理之后返回给浏览器即可.
不像webpack开始编译时需要较多时间对所有资源进行依赖分析编译, 抛弃了webpack那一堆堆插件及loader, 避免了背三级包送快递成盒, 着实减轻了不少负担.
vite在开发过程中也会使用rollup对node_modules或者指定资源进行处理(比如将commonjs模块转成es模块), 生产环境中使用 rollup 对文件进行打包压缩混淆处理.
Eslint
- webpack eslint校验是用过eslint-loader进行处理, 如果校验文件过多会严重拖慢编译进度导致进圈困难被du死成盒.
而在vite在开发中eslint不直接参与文件处理, 可以只使用编辑工具进行提示, 在生产环境发布时校验一次即可.
当然非要在开发时就开启eslint校验也是可以的, 这时需要单独启用eslint监听文件变化进行及时校验, 且几乎不影响开发编译时间.
服务器渲染
- vite开发时是使用的客户端渲染, 保证了更快的编译热更新. 只有生产环境的时候才会采用服务器渲染形式.
这时候就要求开发过程中切勿在服务器端运行的代码中使用浏览器的特有属性和方法(比如window document), 否则服务端运行必将出错直接成盒.
ESM 只爱es模块
- 当私自引用一个非es模块时需要将模块转换成es模块, 默认情况下vite会对
package.json中dependencies属性中的依赖自动进行转换,
且使用模块时的名称与dependencies中的依赖名称必须保持一致, 否则直接爆头成盒.
例如:Uncaught SyntaxError: The requested module '/@modules/axios/index.js' does not provide an export named 'default'
当然你也可以手动在根目录的vite.config.js里面的optimizeDeps.include中指定某些要转的模块.
别名
- 在webpack开发过程中通常只需要设置一次别名, 但是在vite中需要设置两个地方, 一份是针对开发时在
vite.config.js设置的别名,
// vite.config.js
export default {
resolvers: [
{
alias (id) {
if (id.startsWith('@/')) {
return '/src/' + id.slice(2);
}
}
}
]
}
一份是给rollup生产打包时用的别名
// build.js
const rollupAlias = require('@rollup/plugin-alias');
const { build } = require('vite');
const path = require('path');
build({
rollupInputOptions: {
plugins: [rollupAlias({ '@': path.resolve(__dirname, 'src') })]
}
});
愣头青
- 目前vue3.0生态仍在快速发展, vite, 相关UI库, vuex仍需继续采坑吃雷成盒, 预计还要一段时间才能达到相对稳定的状态, 报着吃鸡念头继续往下走吧.
这个是历经多次成盒吃到的鸡, 快速开发, 服务器数据预取渲染, vuex, typescript, eslint, scss应有尽有, 不看看并Star一下嘛 ? vue3-ts-vite-ssr-starter
vue3-ts-vite-ssr-starter
- Lightning-fast cold server start
- Instant hot module replacement (HMR)
- True on-demand compilation
- Use
vue3 vite typescript eslint SSR vuex vue-router element-plus scss
Getting Started
- dev ( csr )
npm i
npm run dev
- test ( ssr )
npm run test
npm run server:data // building api data
- build ( ssr )
npm run build
