我从 webpack 换到 vite,又换回了 webpack

看了下 vue-cli 的装备,需求换的 rule 是这几个。大约的装备如下:

chainWebpack(config) {
const rule = config.module.rule('js')
    // 整理自带的babel-loader
    rule.uses.clear()
    // 增加esbuild-loader
    rule
      .use('esbuild-loader')
      .loader('esbuild-loader')
      .options({
        jsxFactory: 'h',
	jsxFragment: 'Fragment',
	loader: 'jsx',
	target: 'es2015'
      })
      .end()
const tsRule = config.module.rule('typescript')
    tsRule.uses.clear()
    tsRule
      .use('ts')
      .loader('esbuild-loader')
      .end()
}

留意,上面的 jsx 装备只适用于 Vue3,由于 Vue2 没有露出 h 办法。

假如要在 Vue2 上运用 jsx 解析,得需求一个解析 Vue2 语法完好运转时的包。
pnpm i @lancercomet/vue2-jsx-runtime -D

React 关于全新 JSX 转化的思维
@lancercomet/vue2-jsx-runtime github

大约便是把 jsx transform结构单独移了出来,以脱离结构适配 SWCTSC 或许 ESBuildjsx transform

    const rule = config.module.rule('js')
    // 整理自带的babel-loader
    rule.uses.clear()
    // 增加esbuild-loader
    rule
      .use('esbuild-loader')
      .loader('esbuild-loader')
      .options({
        target: 'es2015',
        loader: 'jsx',
        jsx: 'automatic',
        jsxImportSource: '@lancercomet/vue2-jsx-runtime'
      })
      .end()

一起需求修正 tsconfig.json

{
  "compilerOptions": {
    ...
    "jsx": "react-jsx",  // Please set to "react-jsx". 
    "jsxImportSource": "@lancercomet/vue2-jsx-runtime"  // Please set to package name.
  }
}

类型查看

类型查看这块开发时能够交给 IDE 来处理,没必要再跑一个线程。

  chainWebpack(config) {
    // disable type check and let `vue-tsc` handles it
    config.plugins.delete('fork-ts-checker')
  }

代码紧缩

这些其实功用影响现已不大了,聊胜于无。

const { ESBuildMinifyPlugin } = require('esbuild-loader')
  chainWebpack(config) {
    config.optimization.minimizers.delete('terser')
    config.optimization.minimizer('esbuild').use(ESBuildMinifyPlugin, [{ minify: true, css: true }])
  }

优化成果

这是 Vue-CLI 优化之后的打包,现已和 Vite 底子共同了。至于开发,两者的逻辑不相同,热更新确实是慢。

我从 webpack 换到 vite,又换回了 webpack

我从 webpack 换到 vite,又换回了 webpack

完毕

Vite 的生态现已很丰厚了,底子能满意绝大多数的需求了。咱们这次搬迁由于平常开发留传的一些问题而失利了。应该检讨平常写代码不能只为了快,而疏忽一些细节。

这便是本篇文章的全部内容了,感谢咱们的观看。