The trick of learning a lot of things is not to learn a lot at once. – lo,

Visual resource analysiswebpack-bundle-analyzer

The installation

yarn add webpack-bundle-analyzer
Copy the code

configuration

Js // Webpack pack analysis tool const BundleAnalyzerPlugin = in the config folder require('webpack-bundle-analyzer').BundleAnalyzerPlugin; Module. exports return plugins added: new BundleAnalyzerPlugin(/* modifiable parameters */) // Common parameters analyzerPort: OpenAnalyzer, the port used to start the HTTP server in Server mode: opens the report automatically in the default browser. AnalyzerMode: indicates the display mode of analysis results. AnalyzerHost: indicates the host used to start the HTTP server in server modeCopy the code

The effect

According to the need to loadbabel-plugin-import

The installation

yarn add babel-plugin-import
Copy the code

configuration

// add ['import',{libraryName:'antd', style:true}], i.e. {test: /\.(js|mjs|jsx|ts|tsx)$/, include: paths.appSrc, loader: require.resolve('babel-loader'), options: { customize: require.resolve( 'babel-preset-react-app/webpack-overrides' ), plugins: [ [ require.resolve('babel-plugin-named-asset-import'), { loaderMap: { svg: { ReactComponent: '@svgr/webpack?-svgo,+titleProp,+ref![path]', }, }, }, ], ['import',{ libraryName:'antd' , style:true }], isEnvDevelopment && shouldUseReactRefresh && require.resolve('react-refresh/babel'), ].filter(Boolean), cacheDirectory: true, cacheCompression: false, compact: isEnvProduction, }, },Copy the code

The effect

Pay attention to

React project, “react”: “^17.0.1”,