安装分析工具
首先安装webpack-bundle-analyzer
yarn add -D webpack-bundle-analyzer
在工程的打包文件中加上plugin， 笔者的工程使用的craco， 因此在
加入如下代码
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
const path = require("path");
module.exports = {
...
webpack: {
plugins: [
new BundleAnalyzerPlugin({
analyzerMode: 'server',
analyzerHost: '127.0.0.1',
analyzerPort: 8888,
openAnalyzer: true, // 构建完打开浏览器
reportFilename: path.resolve(__dirname, `analyzer/index.html`),
}),
],
}
}
最后运行build后， 可以在本地的8888看到打包配置；
减少最终打包的大小
打包后， 发现一个less文件比较大， 结果是全局引入了antdesign的less文件导致的， 去掉整体引入， 会减少不少大小
然后， 发现moment比较大， 按网上的教程加入
webpack: {
plugins: [
...
new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/),
大小没变化， 彻底删除
new webpack.IgnorePlugin(/moment$/),
要报错， 暂时不管了
然后按照优雅的代码的原则， 在路由上， 把相关性低的页面分开
const BasicPage = React.lazy(() => import("./pages/basic"));
// 外层需要搭配
<Suspense fallback={<div>Error</div>}>
</Suspense>
