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吧