项目优化
webpack v4
打包优化
-
准备工作
-
开启可视化分析方案插件
-
‘speed-measure-webpack-plugin’
- 显示打包速度等信息
-
‘webpack-bundle-analyzer’
-
显示打包后的整体报告
-
具体配置
// moment.js转换day.js new AntdDayjsWebpackPlugin({ preset: 'antdv3', }), //包计时插件 new SpeedMeasurePlugin(), //包分析插件 process.env.ANALYZER && new BundleAnalyzerPlugin(),//增加新的启动命令 "analyzer": "ANALYZER=true node scripts/build.js",
-
-
-
-
loader优化:
- 概念:将这些webpack无法识别的模块进行编译、压缩、打包，最终转换为js的加载器
- 优化: 优化loader搜索范围，忽略不需要编译的目录，
-
css压缩:
-
optimization配置
- 只需在build脚本中使用’optimize-css-assets-webpack-plugin’插件
-
-
js代码分包与压缩:
-
缓存组
-
基础库缓存
- js框架的安装包
-
UI库缓存
- UI框架以及其他样式相关库的安装包
-
通用代码缓存
- 工具包等全局型代码
-
-
具体实现:
splitChunks: { chunks: 'all', // initial(初始化) | async(动态加载) | all(全部) minSize: 30000, // // 大于30k会被webpack进行拆包，默认0 minChunks: 1, // 被引用次数大于等于这个次数进行拆分，默认1 maxAsyncRequests: 5, // 最大异步请求数， 默认1 maxInitialRequests: 5, // 最大初始化请求数，默认1 name: true, automaticNameDelimiter: '.', // 打包分隔符 cacheGroups: { // 基础库 baseChunks: { name: 'base.chunks', // 要分隔出来的 chunk 名称 test: (module) => /react|react-dom|react-router-dom|react-redux|redux|axios|moment|lodash/.test( module.context ), priority: 20, // 打包优先级 }, uiChunks: { name: 'ui.chunks', test: (module) => /antd|@ant-design\/icons|echarts|emoji-mart/.test(module.context), priority: 10, // 打包优先级 }, default: { name: 'common.chunks', // 要分隔出来的 chunk 名称 minChunks: 2, // 引入两次及以上被打包 priority: 5, reuseExistingChunk: true, // 可设置是否重用已用chunk 不再创建新的chunk }, }, },
-
-
实现效果:
-
拆包与缓存之后对比:
-
打包加载时间对比
-
打包体积对比
-
首屏优化
-
图片处理
- 由png更改为webP ⇒ 减少LCP
- 增加img的宽高
-
性能对比
