记react中antd打包的坑体积太大和className命名

清风笑～

已于 2022-11-15 10:21:20 修改

阅读量8.1k

点赞数

分类专栏： js前端 react es6 文章标签： react.js javascript 前端

于 2018-11-26 13:07:20 首次发布

本文链接：https://blog.csdn.net/ling369523246/article/details/84536825

版权

前端使用antd的时后打包体积太大，如图1.6M还是挺大的，把antd所有的资源都加载进入了
在这里插入图片描述

根据antd 官网的推荐，按需加载方式居于.babel配置

在这里插入图片描述

这样再来看看打包分析的

在这里插入图片描述

按需加载打包了button和layout 在src文件下也只引用了这个两个组件
在这里插入图片描述

这样做很方便的，同时要在entry这里在添加一个antd就不对了, 又把整个antd打包进来了，这样就不对了

entry: {
   
		app: ['./src/js/index.js'],	//入口文件
		antd: ['antd']
	},

在这里插入图片描述

写到这里还有个问题在用到了css-loader中localIdentName 属性时，要避免antd的css类名被修改

var cssLoader = {
   
		loader: 'css-loader',
		options: {
   
			localIdentName: '[local]--[hash:base64:6]'
		}
	}

在这里插入图片描述

就需要用loader 中的 exclude 和include 来出来，这两个属性都需要用上

{
   
  test: /\.css$/,
  exclude: /node_modules/,
  use:

关注