reactjs - 我的 react-admin 包很大(860KB)
问题描述
我已经尝试配置各种不同的优化方法,但我的 react-admin 包大小仍然很大,为 860KB。
我能做些什么呢?正常吗?可能的原因是什么?我会在一分钟内发布我的 webpack 配置的链接。
我认为目前没有任何聪明的方法可以进行代码拆分。我实施的资源很少,它们应该总是一起使用。
链接到我的常用 webpack 配置: https ://pastebin.com/t6uMWiJ6
const path = require('path');
const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry: {
main: './src/components/index.js'
},
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'static/js/[name].[contenthash:8].js'
},
module: {
rules: [
{
test: /\.(js|jsx)$/,
loader: 'babel-loader',
options: {
cacheDirectory: true,
cacheCompression: false,
babelrc: true
}
},
{ test: /\.json$/, loader: 'json-loader' },
{
test: /\.css$/,
use: [
'style-loader',
'css-loader'
]
},
{
exclude: [/\.(js|jsx)$/, /.html$/, /.css$/, /.json$/],
loader: 'file-loader',
options: {
name: 'static/media/[name].[contenthash:8].[ext]'
}
}
]
},
resolve: {
unsafeCache: true,
extensions: ['.js', '.jsx', '.json', '.css'],
alias: {
actions: path.resolve(__dirname, './src/actions'),
reducers: path.resolve(__dirname, './src/reducers'),
components: path.resolve(__dirname, './src/components'),
lib: path.resolve(__dirname, './src/components/_lib'),
styles: path.resolve(__dirname, './src/styles'),
config: path.resolve(__dirname, './src/config')
}
},
plugins: [
new HtmlWebpackPlugin({
template: './src/public/index.html',
favicon: './src/public/favicon.ico'
}),
new webpack.PrefetchPlugin('react'),
new webpack.PrefetchPlugin('react-dom')
],
optimization: {
usedExports: true
}
};
这是我的依赖项
{
"dependencies": {
"@babel/runtime": "^7.9.2",
"@material-ui/core": "^4.9.13",
"@material-ui/icons": "^4.9.1",
"@material-ui/pickers": "next",
"connected-react-router": "^6.8.0",
"final-form": "^4.19.1",
"jwt-decode": "^2.2.0",
"moment": "^2.25.3",
"prop-types": "^15.7.2",
"ra-core": "^3.5.0",
"ra-data-simple-rest": "^3.2.2",
"react": "^16.12.0",
"react-admin": "^3.1.1",
"react-dom": "^16.12.0",
"react-final-form": "^6.4.0",
"react-redux": "^7.2.0",
"react-router": "^5.1.2",
"react-router-dom": "^5.1.2",
"redux": "^4.0.5",
"redux-saga": "^1.1.3"
},
"devDependencies": {
"@babel/core": "^7.9.6",
"@babel/plugin-syntax-dynamic-import": "^7.8.3",
"@babel/plugin-transform-runtime": "^7.9.0",
"@babel/preset-env": "^7.9.5",
"@babel/preset-react": "^7.9.4",
"babel-loader": "^8.1.0",
"css-loader": "^3.5.2",
"file-loader": "^6.0.0",
"html-webpack-plugin": "^4.3.0",
"style-loader": "^1.2.1",
"webpack": "next",
"webpack-bundle-analyzer": "^3.7.0",
"webpack-cli": "^3.3.11",
"webpack-dev-server": "^3.11.0",
"webpack-manifest-plugin": "^2.2.0",
"webpack-merge": "^4.2.2"
},
"peerDependencies": {
"history": "^4.10.1",
"immutable": "^4.0.0-rc.12",
"seamless-immutable": "^73.1.4"
},
"sideEffects": [
"*.css"
]
}
解决方案
摇树可能是您需要查看的内容。见https://webpack.js.org/guides/tree-shaking/
请注意,正如他们上面所说,在源代码中导入模块的方式在这里也很重要。
但从本质上讲,它应该使 webpack 只捆绑所需的 npm 包的部分。
推荐阅读
- docker - traefik v2 仪表板基本身份验证在 AWS elb 后面不起作用
- neo4j - Neo4j 执行时间的确切时间是多少?
- machine-learning - 找出机器学习问题的类型
- ios - Blazor WebAssembly iOS 兼容性
- swift - 在组合中收到多个 ObservableObject 属性更改的通知
- algorithm - 找到构成四边形边界的一组像素的角点
- python-3.x - 如何实时跟踪视频中两个对象相交的时间?
- random-forest - 如何获得 ranklib 生成的随机森林模型的特征重要性?
- javascript - 仅在页面重新加载后触发推送器
- php - 从多个 php 文件更新同一文本文件中的一行