webpack 优化配置
模式
不同 mode 下 webpack 的默认配置,参考官方文档
Tree Shaking
基于 ES6 的 import 和 export,打包时移除未使用到代码。
配置:babel/preset-env: module: false,保留 ES6 模块,才会进行 Tree Shaking。
忽略 Tree Shaking 配置 package.js 中的 sideEffects: ['*.css'] 属性。
JS压缩
webpack默认使用 Terser-webpack-plugin 插件
作用域提升
打包时,进行模块的合并;减小代码体积,提高效率。
Babel7 优化
@babel/polyfill:兼容性配置 useBuitIns: 'usage'
复用辅助函数
plugins: @babel/plugin-transform-runtime
配置浏览器 targets
webpack 依赖优化
noParse
指定不解析的库,例如 lodash
配置:module: { noParse: 'lodash', ...}
提高构建速度、忽略较大库
DIIPlugin
避免重复构建不变的库,例如 react、react-dom 等。
webpack.dll.config.js: 抽离动态库
webpack.config.js 中配置使用 dll 库, 使用 DIIReferencePlugin 插件。
监测与分析工具
Stats
webpack-bundle-analyzer
speed-measure-webpack-plugin
React 按需加载
ReactRouter 基于 webpack 的动态引入
使用 Reloadable 高级组件