Svg icons make bunlde size too large #12011
Comments
|
Translation of this issue: antd svg package size is too large, it is recommended @ant-design/icons package on demand
Version3.9.0 EnvironmentWebpack4 Reproduction linkhttps://zlab.github.io/report.html Steps to reproduceWebpack build What is expected?Icon Pack as needed, js file split What is actually happening?Packed into chunk-vendors |
我只用到了几个icon
|
|
这需要深入讨论 |
|
cc @yesmeck |
|
需要提供一个可以按需加载的方式，antd 组件内部也用这个方式。 import Star from 'antd/icons/star';
<Star /> |
|
但是这样做的话，以前的写法无法兼容 <Icon type="star" /> // should import star icon first |
|
不能按需打包, 异步加载也好啊, 之前使用iconfont就是页面内容会先出来, 图标会慢慢加载出来 |
|
|
不会的，只要不用 |
|
有些场景不能按需打包, 比如设置menu的图标, 如果可以后台配置, 这样前端是无法预知会设置成什么图标的, |
|
实际上内置使用了 |
我们做的后台系统的menu就是配置的，图标异步加载真的很需要，全量打包实在太大了。 |
|
感觉异步比较好。
|
内部的写法都改掉 |
|
项目中有type是个变量，是只能引入全量了吗？ |
|
看看是否能用 svg symbol sprite 的方式尽可能减少全量包的大小。 https://github.com/jkphl/svg-sprite |
|
另外 |
|
+1 ，确实包大了一倍 |
|
💢 脑壳痛。。。。大爷的。。。 |
|
最骚的是带了很多 SourceMappingUrl |
|
搞得我都退到 3.8.2版本了 |
|
@i-tengfei Wow, it's working! Thank you very much! |
|
For antd@4 we are now using a own package, which overwrites the @ant-design/icons package and replace the antd icons with fontawesome icons. It only provides the icons antd requires. And reduced the bundle size for us significantly, as we did not manage to get treeshaking enabled and therefore the whole an-design/icons package was included. |
Thanks , it works ! |
I'm not sure whether it is resolved at all. It still has all the icon bundles into the package: {
"libraryName": "antd",
+ "libraryDirectory": "es",
"style": true
},import {DeleteOutlined, EditOutlined, WarningTwoTone} from "@ant-design/icons";
|
|
Using ['import', {
libraryName: '@ant-design/icons',
libraryDirectory: '', // defaults to 'lib'
camel2DashComponentName: false // defaults to true
}]
import {
DesktopOutlined,
FileOutlined,
PieChartOutlined,
TeamOutlined,
UserOutlined,
} from '@ant-design/icons' |
|
|
@mit123suki @nwoeddie Thanks for your suggestion i tried both but still no luck. Not sure what i got wrong in the config. My full config is as below: const webpack = require("webpack");
const BundleAnalyzerPlugin = require("webpack-bundle-analyzer").BundleAnalyzerPlugin;
const CopyWebpackPlugin = require("copy-webpack-plugin");
const ProgressBarPlugin = require("progress-bar-webpack-plugin");
const ForkTsCheckerWebpackPlugin = require("fork-ts-checker-webpack-plugin");
var LodashModuleReplacementPlugin = require("lodash-webpack-plugin");
const AntdDayjsWebpackPlugin = require("antd-dayjs-webpack-plugin");
const path = require("path");
let dev = {
mode: "development",
optimization: {
usedExports: true,
noEmitOnErrors: true
},
entry: [
path.resolve(__dirname, "./src/index.tsx")
],
output: {
path: path.resolve(__dirname, "./public"),
publicPath: "/",
filename: "[name].js"
},
target: "web",
devServer: {
// writeToDisk: true,
historyApiFallback: true, // catch all 404
port: 8080,
hot: true,
proxy: {
"/backend": {
target: "http://localhost:4000",
pathRewrite: { "^/backend": "" }
},
"/runner": {
target: "http://localhost:4001",
pathRewrite: { "^/runner": "" }
}
}
},
devtool: "cheap-module-eval-source-map",
resolve: {
alias: {
"react-dom": "@hot-loader/react-dom"
},
extensions: [".js", ".jsx", ".less", ".tsx", ".ts"]
},
plugins: [
new LodashModuleReplacementPlugin(),
new AntdDayjsWebpackPlugin(),
new CopyWebpackPlugin([{ from: path.join(__dirname, "./static"), to: "./" }]),
new ProgressBarPlugin(),
new ForkTsCheckerWebpackPlugin(),
new webpack.HotModuleReplacementPlugin(),
new webpack.DefinePlugin({
"process.env.ENV": JSON.stringify("dev"),
}),
new BundleAnalyzerPlugin({
"openAnalyzer": true,
analyzerPort: 8889
})
],
module: {
rules: [
{
test: /\.(tsx|ts)$/,
use: [
{
loader: "ts-loader",
options: {
transpileOnly: true
}
}
],
exclude: /node_modules/
}
, {
test: /\.(js|jsx)$/,
exclude: /node_modules/,
use: {
loader: "babel-loader",
options: {
"presets": [
[
"@babel/preset-env",
{
"targets": "defaults",
"modules": false
}
],
[
"@babel/preset-react"
]
],
plugins: [
"@babel/plugin-transform-runtime",
["import",
{ "libraryName": "antd", "style": false, "libraryDirectory": "es" }, "antd"],
["import",
{
"libraryName": "@ant-design/icons",
// "style": false,
"libraryDirectory": "es/icons",
"camel2DashComponentName": false
}, "@ant-design/icons"],
"react-hot-loader/babel"
]
}
}
},
{
test: /\.less$/,
use: [
{
loader: "style-loader"
},
{
loader: "css-loader",
options: {
sourceMap: true
}
},
{
loader: "less-loader",
options: {
sourceMap: true,
javascriptEnabled: true
}
}]
},
{
test: /\.(png|jpg|gif|svg|ico)$/,
use: [
{
loader: "file-loader"
}
]
},
{
test: /\.css$/,
use: [
"style-loader",
"css-loader"
]
}
]
},
};
module.exports = dev; |
Failed to compile.
./node_modules/@ant-design/icons/dist/icons/index.d.ts
Module not found: Can't resolve './AccountBookFilled' in '/Users/andy/Projects/shop-platform/node_modules/@ant-design/icons/dist/icons'
@xezzon 直接显示第一个图标module都找不到。我尝试了加babel-plugin-import的配置，也还是不行。 |
hi, nwoeddie~!, my config isn't work, i had split import options to single, but it's unuse too; can i learn u complete config |
|
this aritcle may solve the problem: https://www.cnblogs.com/fulu/p/13255538.html |
This is not the correct syntax for babel 7. The import plugin does not support an array. The right way: |
It not works in my project. import UploadOutlined from "@ant-design/icons/UploadOutlined";
import HighlightFilled from "@ant-design/icons/HighlightFilled";
import DeleteFilled from "@ant-design/icons/DeleteFilled"; |
|
I use
Update My |
|
i was able to solve it with this |
|
@hannadrehman It works for 3.x? |
and others
Version
3.9.0
Environment
webpack4
Reproduction link
https://zlab.github.io/report.html
Steps to reproduce
webpack build
What is expected?
icon 按需打包, js文件拆分
What is actually happening?
打包到chunk-vendors里去了
IssueHunt Summary
Backers (Total: $203.00)
Submitted pull Requests
Tips
IssueHunt has been backed by the following sponsors. Become a sponsor
The text was updated successfully, but these errors were encountered: