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”,