关于前端:亲身体验了一把vite感觉真的没有说的那么好很多坑

1、有话要说

原本我的项目中用的是webpack，我想着把我的项目构建成vite，就能够晋升工作效率，然而谁知。各种各样的坑，所以我感觉还是简略的写下来

2、require

家喻户晓require是webpack中的语法。
如果你想动静申请一个动态资源门路，你能够这样

computed: {
    getUrl() {
      return require("@/assets/images/" + this.src);
    }
}

然而在vite中，不是，它不辨认require，而是要应用 new URL()
在我的项目中坑的是new URL中居然不只是@别名符，你只能用相对路径

 computed: {
    getUrl() {
      return new URL(`../../assets/images/${this.src}`, import.meta.url).href;
    }
},

因为一旦应用 @形式，在开发时失常，那么你编译后，就会报错。基本找不到门路。

2、process

process也用不了，
比方你我的项目中用了
process.env.NODE_ENV
那么只能替换为
import.meta.env.MODE

3、webpack.ProvidePlugin

vite中不反对webpack中提前注入的形式。

比方你我的项目中很多中央都要用

import moment from 'moment';
import _ from 'lodash';
import mathjs from 'mathjs';
import jquery from 'jquery';

你要在每个用到的组件中，都要引入。很烦很烦。
所以webpack就提供了一个插件ProvidePlugin，能够让你提前就一次性注入，之后在页面中间接应用，无需再引入

然而，然而，这么重要的性能，vite居然不反对。

4、webpackChunkName

无奈在路由中通过webpackChunkName进行代码宰割。

导致在路由中引入的组件，编译后，会全副散落在static下的js文件夹下。很多很多。

5、启动很慢

我看到这里，认为页面曾经秒开了。然而关上页面才发现。统一loading中，没有任何反馈

回过头再看控制台

居然是慢吞吞的加载依赖。

此时我发现，我的node_modules下多进去了一个.vite文件夹

关上一看，吓我一跳。多进去了这么多文件夹

前几个大于1000k的文件，合起来有30M大。而整个.vite文件夹，足足有40M

而后，进去页面，关上浏览器 network

算了，不截图了，太多了，

269个申请。。。。。。。。。

震惊

当我登录之后，切换路由，它又去加载了172个申请。这简直是webpack的4倍多

而webpack才19次，因为我通过webpackChunkName将这个路由的文件全放到chunk-dataSource.js这一个文件中了

6、编译

这是我vite.config.js配置

build: {
    target: 'modules',
    outDir: resolve(__dirname, `dist/${entryPath}`), //绝对于root而言
    assetsDir: 'assets', //绝对于build.outDir而言
    assetsInlineLimit: 4096,
    cssCodeSplit: true,
    minify: 'esbuild',
    sourcemap: false,
    rollupOptions: {
      input: {
        index: resolve(__dirname, 'index.html'),
      },
      output: {
        chunkFileNames: 'static/js/[name]-[hash].js',
        entryFileNames: 'static/js/[name].js',
        assetFileNames: 'static/[ext]/[name]-[hash].[ext]',
      },
    },
    // chunk 大小正告的限度
    chunkSizeWarningLimit: 500,
  },

因为我应用到了中国地图，所以把geoJSON放到本地了，后果它间接报错。编译不通过。
提醒内存溢出。

费了我好大劲才找进去是geoJSON导致的问题。

其次是代码宰割。

css散落一地

js也散落一地

本想通过rollup自带的manualChunks来手动宰割

build: {
    target: 'modules',
    outDir: resolve(__dirname, `dist/${entryPath}`), //绝对于root而言
    assetsDir: 'assets', //绝对于build.outDir而言
    assetsInlineLimit: 4096,
    cssCodeSplit: true,
    minify: 'esbuild',
    sourcemap: false,
    rollupOptions: {
      input: {
        index: resolve(__dirname, 'index.html'),
      },
      output: {
        chunkFileNames: 'static/js/[name]-[hash].js', //chunkFileNames会采纳rollup外部主动宰割，能够应用manualChunks明确指定宰割。
        entryFileNames: 'static/js/[name].js',
        assetFileNames: 'static/[ext]/[name]-[hash].[ext]',
        manualChunks(id, { getModuleInfo }) {
          if (id.includes('node_modules')) {
            return 'vendor'; //代码宰割为第三方包
          }
          if (id.includes('views/pre-login')) {
            return 'pre-login'; //代码宰割为数据源
          }
          if (id.includes('views/home')) {
            return 'home'; //代码宰割为数据源
          }
          if (id.includes('views/settings')) {
            return 'settings'; //代码宰割为数据源
          }
        },
      },
    },
    // chunk 大小正告的限度
    chunkSizeWarningLimit: 500,
  },

没承想，编译完后，用vite preview预上线去预览页面，报错了

我开发环境好好地，一编译，M is not a function

这还怎么玩,啥也不是，老老实实换回webpack吧