开发环境 采用vite 的后 ,开发启动从原来的20多s 降低到如今的 0.5 s 以内,体验棒棒的,由于各种兼容性问题,生产打包 还是采用webpack ,为了优化性能,可以采用一下措施
首先webapck 升级为 5
首先 安装。webpack-bundle-analyzer 分析打包后的 文件;
一 .首先打包速度优化。
1. 打包速度优化 cache: { type: "filesystem", // 使用文件缓存 }, 不再需要 cache-loader。 以及。dll-plugin;
2. 使用 webpack 资源模块 (asset module) 代替旧的 assets loader(如 file-loader
/url-loader
/raw-loader
等),减少 loader 配置数量。
loader 转化。指定 include ; exclude 过滤不需要编译的文件夹
二 优化 resolve 配置。:resolve 用来配置 webpack 如何解析模块,可通过优化 resolve 配置来覆盖默认配置项,减少解析范围。
配置 alias
module.exports = {
resolve: {
alias: {
"@": path.resolve(__dirname, '../src'),, // @ 代表 src 路径
},
},
};
配置 extensions 需要解析的文件类型列表。
由于 webpack 的解析顺序是从左到右,因此要将使用频率高的文件类