前端性能优化之包体积优化

在前端性能优化的各种措施中，打包体积优化是其中比较基础的一种，其目的为减少页面加载过程中文件的下载及编译时间，加快首次渲染速度，因在平时的工作经验中这个优化方式取得了不错的收益故写成一篇文章分享方法论

以下用react的一个demo举例

• 使用脚手架新建一个demo

npx create-react-app my-app
cd my-app
npm start

成功之后会看到这个界面

• 这个时候你看不到脚手架相关的配置

npm run eject

这个时候config文件下就会出现打包相关的配置

• 然后就可以安装依赖分析插件

npm install webpack-bundle-analyzer --save-dev

• 然后再plugin的配置中加入

const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
plugin: [
    new BundleAnalyzerPlugin()
]

确保安装无误之后可以开始运行,运行之后可以在8888端口看到包的展示 http://127.0.0.1:8888/

npm run build

• 从绿色的这个部分可以看出包含node_modules和src的相关代码，然后你就可以通过代码引用看是否没有必要导进去的包被打入 具体的优化方式大概有以下几种 1.本地图片压缩 2.不常用资源通过cdn引入 3.组件库的按需引入 3.高性价比包的替换，比如moment.js - day.js 4.是否有重复包的打入 5.动态加载 6.是否开启了压缩 7.路由懒加载