共计 2593 个字符，预计需要花费 7 分钟才能阅读完成。
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 吧
