webpack 打包速度以及 bundle 优化

木_林_森

于 2021-12-05 18:28:55 发布

阅读量941

点赞数

分类专栏： webpack react 性能优化文章标签： webpack 前端

本文链接：https://blog.youkuaiyun.com/weixin_42317878/article/details/121731022

版权

本文介绍了如何优化webpack 5的打包速度和bundle体积。包括升级webpack到5，使用webpack-bundle-analyzer，优化loader配置，调整resolve设置，使用alias和extensions，以及thread-loader。另外，通过分离CSS，代码分割，Tree Shaking，按需加载，Suspense和React.lazy，配置babel，使用externals和CDN缓存等方式减小包的体积。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

开发环境采用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 的解析顺序是从左到右，因此要将使用频率高的文件类

最低0.47元/天解锁文章