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

拼搏现实的明天。 2022-11-11 05:47 164阅读 0赞

# 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服务器的主机

**效果**  
![image-20210318163237618.png][]

## 按需加载[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,
                  },
                },

**效果**

![image-20210318165519041.png][]

![image-20210318162900049.png][]

## 注意 ##

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

[webpack-bundle-analyzer]: https://github.com/webpack-contrib/webpack-bundle-analyzer
[image-20210318163237618.png]: /images/20221022/1fbbb481b639444895e1950c504f5a06.png
[babel-plugin-import]: https://github.com/ant-design/babel-plugin-import
[image-20210318165519041.png]: /images/20221022/d4b9728d0eff46739c4312e639f7868d.png
[image-20210318162900049.png]: https://img-blog.csdnimg.cn/img_convert/ed534b6f864ebaa43c7be6360aaf7547.png