如何优化webpack构建速度
date
Sep 19, 2023
slug
webpack_bootstrap_speed_optimize
status
Published
tags
webpack
前端
frontend
interview
summary
项目大了之后每次打包的速度也会下降，这篇文章简单总结了优化构建速度的思路。
type
Post
优化webpack构建速度
- 使用高版本的webpack和nodejs
- 多进程并行压缩代码，利用缓存
- webpakc-parallel-uglify-plugin
- terser-webpack-plugin开启parallel，利用缓存
- uglify-webpack-plugin开启parallel
- hard-source-webpack-plugin
- 缩小打包作用域
- exclude/include
- resolve.modules 指明第三方模块的绝对路径
- resolve.extensions尽可能减少后缀尝试的可能行
- ignore-plugin
- 提取页面公共资源
- 使用html-webpack-externals-plugin，将基础包通过cdn引入，不打入bundle中
- 用dll-plugin进行分包，让一些基本不会改动的代码先打包成静态资源，节省时间。 https://www.cnblogs.com/skychx/p/webpack-dllplugin.html
- tree shaking
- 尽可能使用es6 module
- 禁用bable-loader模块依赖解析，否则webpack接收到的就是转换过的cmjs模块无法tree-shaking