背景

duangkey本周新作业第一天，等候体系注册之余，对上星期在老东家的最终一次优化做个记录。

公司产品是IOT项目，需要对接视频监控渠道以及各种的协议对接，因此项目体积不可避免的大。
为了更好的完结组件的保护作业，运用了verdaccio去管理组件库，项目中所运用的组件都是经过私有库进行安装引进的，组件许多，开源插件也安装了不少。

在没有进行构建优化之前，项目构建耗时有时会到达恐怖的300s，现磨咖啡都能磨四五杯了。

优化战略

项目运用渐进式结构vue进行搭建，版本是vue3，打包东西版本号是webpack5，低版本webpack请慎重参阅；

正常优化手段是借助相关plugin进行装备优化，比方TerserWebpackPlugin、CssMinimizerWebpackPlugin等等

TerserWebpackPlugin：js紧缩插件；

CssMinimizerWebpackPlugin：运用cssnano优化和紧缩CSS；

（详细装备和介绍可参阅官方文档⬆）

下面介绍本次的主角– esbuild-loader

Speed up your Webpack build withesbuild!

esbuildis a JavaScript bundler written in Go that supports blazing fast ESNext & TypeScript transpilation andJS minification.

esbuild-loaderlets you harness the speed of esbuild in your Webpack build by offering faster alternatives for transpilation (eg. babel-loader/ts-loader) and minification (eg. Terser)!

简单来说便是运用esbuild提高webpack构建速度，它是运用Go言语开发的一款JS Bundler，支持超快的ESNext和TS转译以及JS的紧缩；它可以使你利用它的速度去代替Terser和babel，也是Terser和babel进行性能优化的替代计划。

这说明我们只需要运用esbuild-loader，就可以完成Terser和babel的功用。

安装

npm i -D esbuild-loader
OR
yarn add esbuild-loader

vue.config.js的装备
引进esbuild-loader的EsbuildPlugin模块，并在chainWebpack中进行装备

const { EsbuildPlugin } = require('esbuild-loader');
const rule = config.module.rule('js'); // ①
rule.uses.clear(); // ②
rule.use('esbuild-loader').loader('esbuild-loader').options({
      loader: 'jsx',// 3-1
      target: 'es2015' // 3-2
    });   // ③
config.optimization.minimizers.delete('terser');  // ④
config.optimization
      .minimizer('esbuild')
      .use(EsbuildPlugin, [{ target: 'es2015', css: true }]);   //  ⑤
  1. 运用esbuild编译js文件
  2. 清空webpack内置的babel-loader
  3. 增加esbuild-loader
  4. 删除底层terser, 改用esbuild-minimize-plugin
  5. 运用esbuild-loader进行css的紧缩
    3-1. 运用esbuild-loader编译含有jsx语法的文件
    3-2. 编译的方针是es2015标准的文件

问题

装备成功后，构建速度显着提高，看上去形似没什么问题了。但是，在vue3中如果运用h函数进行node的创立的话，会报react is not defined的过错，这说明此刻项目并不能正常解析含有h函数的文件，导致项目发动失败。

解决方法

在options中增加2行装备参数：

jsxFactory: 'h', //自定义jsx解析计划，此处运用h作为渲染函数
jsxFragment: 'Fragment' //默认为 React.Fragment , 换成对应的 Vue.Fragment

保存后重新发动项目，根本可以控制在磨一杯咖啡的时间内了。

【运用speechSynthesis完成文字转语音功用】