安裝分析工具
首先安裝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>
