webpack优化实践——可视化资源分析与按需加载

webpack实践——可视化资源分析与按需加载

学到很多东西的诀窍，就是一下子不要学很多。 ——洛 克

可视化资源分析webpack-bundle-analyzer

安装

yarn add webpack-bundle-analyzer

配置

在config文件夹中找到webpack.config.js
//webpack打包分析工具
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;

module.exports return中的plugins下添加：
new BundleAnalyzerPlugin(/*可修改参数*/)

//常用参数
analyzerPort: 在server模式下用于启动HTTP服务器的端口
openAnalyzer: 在默认浏览器中自动打开报告。
analyzerMode: 分析结果的展现方式
analyzerHost: 在server模式下用于启动HTTP服务器的主机

效果

按需加载babel-plugin-import

安装

yarn add babel-plugin-import

配置

//babel-loader配置中的options.plugins中添加
['import',{ libraryName:'antd' , style:true }],

即：
{
              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,
              },
            },

效果

注意

react项目，“react”: “^17.0.1”,