【前端】webpack3-vue2项目升级为vue-cli5项目，非必要不升，要升就直接rspack吧

介绍

尝试把一个webpack3-vue2项目升级为vue-cli5项目， 本以为提升很大，速度能减半，结果看着也不咋滴, 于是对比了以下框架的性能。

• webpack3
• vue-cli5
• vue-cli5 + esbuild-loader
• rspack (字节开源的webpack替代品， 兼容90%的生态，目前版本0.7.8) , 效果牛的。

总结：非必要不升，等rspack成熟后直接一步到位吧。

性能对比

基于同一个管理端项目， 约12个菜单项进行常见的性能对比。

对比项/脚手架	webpack3	vue-cli5	vue-cli5（+esbuild-loader）	rspack
build时长（初次构建+增量构建）	94.9秒（90秒）	72秒（68秒	34.5秒	12秒(10秒)
node_modules体积	343MB	479MB	479MB	412MB
dev启动时间	59.8秒	36秒	38秒	7.16s
修改后热更新时间	1.3秒	1.19秒	1.35秒	0.43s

使用vue-cli + esbuild加速构建

使用 “esbuild-loader”: “^3.0.1” 而非 4.0.1版本， 不然报错且无法运行
esbuild-loader构建速度遥遥领先,但是 dev启动时间和热更新时间没啥变化，而且低版本浏览器兼容性应该不如babel-loader。
vue.config.js引入esbuild-loader

    chainWebpack: (config) => {
        // 使用esbuild-loader替代babel-loader
        const rule = config.module.rule('js')
        rule.uses.clear()
        rule.use('esbuild-loader').loader('esbuild-loader').options({
            loader: 'js',
            target: 'chrome90'
        })
        config.optimization.minimizers.delete('terser')
        config.optimization
            .minimizer('esbuild')
            .use(EsbuildPlugin, [{ target: 'chrome90', css: true }])
  }

使用rspack（vue-cli5可以无缝迁移）

介绍

一款由字节开源的webpack替代品，使用rust编写，旨在解决webpack大型项目打包过慢的问题，兼容或平替可90%的webpack配置语法。
同时，rsbuild替代babel来转译js，速度提升了约5倍。

这个项目还是比较值得期待的。

依赖升级

1. sass升级

    "sass": "^1.75.0",
    "sass-loader": "^7.3.1",

升级后，好像意义不大。

        "sass": "^1.77.5",
        "sass-loader": "^14.2.1",

2. static目录替换（vue-cli5静态资源是放public下的）
   替换以前路径中的 ‘/static’ 为 ‘’
3. 禁用项目报错时，全屏遮罩层提示
   vue.config.js

devServer: {
        client: {
            overlay: false
        },
}

4. 环境变量升级
   以前 config/prod.env.js 下配置环境变量
   现在 .env.production下 配置

总结

感觉提升不大，懒得继续升级了，继续webpack3吧