webpack初识
webpack配置推荐
React项目中webpack优化打包体积配置推荐(移动端)
-
静态资源整合打包压缩
- 资源压缩
- css 采用 mini-css-extract-plugin 抽离 css
- CSS 压缩,采用 optimize-css-assets-webpack-plugin
- JS 压缩,采用 terser-webpack-plugin + optimization -> minimizer
- 资源压缩
-
代码分割
- Dynamic Imports:动态分割 chunkFilename 写法分割出来的 bundle 会以 id + hash 的命名方式
- optimization.splitChunks 拆分模块,打包代码分割
-
缩小构建范围
- include/exclude
- resolve(alias, extension) resolve.alias 配置
-
缓存
- babel-loader + cachedirectory
-
按需加载(组件,第三方库)
- antd-mobile 实现按需加载
- 没有适合的第三方库可以采用按需引入
-
优化
- 大图片视频建议放到云服务器
- 第三方库用百度 cdn 引入
- 图片压缩,image-webpack-loader
- CSS 去除不用的 css,purgecss-webpack-plugin
- 使用 css modules,需要配置白名单 > whitelistPatterns: [/^am.+/, /^Search\w+/, /^Home\w+/],//https://daihaoxin.github.io/post/fc406327.html
- 服务端可以开 gzip 压缩 CompressionWebpackPlugin
- 多进程/多实例打包,采用 thread-loader
- dll 打包 (webpack.dll.js + webpack.dllplugin + dllreferenceplugin + manifest.json)
- scope hoisting (production)
- 提供动态 polyfill 服务 (基于 user-agent 动态获取 polyfill)