企业级项目之webpack配置推荐

webpack初识

• 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)