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

5次阅读

共计 2593 个字符，预计需要花费 7 分钟才能阅读完成。

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

家喻户晓 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;
    }
},

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

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

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

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

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

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

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

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

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

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

回过头再看控制台

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

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

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

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

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

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

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

震惊

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

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

这是我 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 吧

正文完