我和webpack一起工作过,但老实说,我从来没有注意过构建消息(Npm run build)。
现在我开始学习一点关于webpack的知识,什么是模块,插件等等,我开始对webpack的产品进行优化。当我运行npm run build
时,我得到警告:
WARNING in asset size limit: The following asset(s) exceed the recommended size limit (244 KiB).
This can impact web performance.
Assets:
main.js (478 KiB)
WARNING in entrypoint size limit: The following entrypoint(s) combined asset size exceeds the recommended limit (244 KiB). This can impact web performance.
Entrypoints:
main (493 KiB)
main.js
style.css
我有一份档案是为webpack制作的
module.exports = {
optimization: {
minimizer: [
new UglifyJsPlugin({
uglifyOptions: {
mangle: {
keep_fnames: true
},
compress: {
warnings: false, // Suppress uglification warnings
pure_getters: true,
unsafe: true,
unsafe_comps: true
},
output: {
comments: false
},
toplevel: false,
nameCache: null,
ie8: false,
keep_classnames: undefined,
keep_fnames: false,
exclude: [/\.min\.js$/gi] // skip pre-minified libs
}
})
]
},
plugins: [
new OptimizeCssAssetsPlugin(),
new CompressionPlugin({
asset: "[path].gz[query]",
algorithm: "gzip",
test: /\.js$|\.css$|\.html$/,
threshold: 10240,
minRatio: 0
}),
new webpack.IgnorePlugin(/^\.\/locale$/, [/moment$/])
]
};
我在包含路由的文件中使用了react-code-react。
import Async from "react-code-splitting";
const Dashboard = () => <Async load={import("../components/Dashboard")} />;
const EditExpense = () => <Async load={import("../components/EditExpense")} />;
const Header = () => <Async load={import("../components/EditExpense")} />;
const Help = () => <Async load={import("../components/Help")} />;
const NotFound = () => <Async load={import("../components/NotFound")} />;
我在webpack中使用了diff源码地图进行生产
devtool: isProduction ? "source-map" : "inline-source-map"
我移动了devDependencies中的所有开发包,使其不会有太多用于生产的模块。
{
"name": "React Redux Project",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"dev": "webpack-dev-server --mode development --config config/webpack.base.config.js --open --hot --history-api-fallback",
"build": "webpack --mode production --config config/webpack.prod.config.js --env.NODE_ENV=production --progress",
"start:prod": "node server"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"@babel/cli": "^7.0.0-beta.51",
"@babel/core": "^7.0.0-beta.51",
"@babel/preset-env": "^7.0.0-beta.51",
"@babel/preset-react": "^7.0.0-beta.51",
"@babel/preset-stage-2": "^7.0.0-beta.51",
"babel-core": "^7.0.0-beta.3",
"babel-loader": "^8.0.0-beta.3",
"compression-webpack-plugin": "^1.1.11",
"css-loader": "^0.28.11",
"express": "^4.16.3",
"extract-text-webpack-plugin": "^4.0.0-beta.0",
"html-webpack-plugin": "^3.2.0",
"less-loader": "^4.1.0",
"node-sass": "^4.8.3",
"normalize.css": "^8.0.0",
"optimize-css-assets-webpack-plugin": "^4.0.2",
"postcss-loader": "^2.1.5",
"react-addons-shallow-compare": "^15.6.2",
"react-code-splitting": "^1.2.1",
"react-dates": "^16.7.0",
"sass-loader": "^7.0.3",
"style-loader": "^0.21.0",
"uglifyjs-webpack-plugin": "^1.2.5",
"url-loader": "^1.0.1",
"uuid": "^3.2.1",
"webpack": "^4.12.0",
"webpack-bundle-analyzer": "^2.13.1",
"webpack-cli": "^3.0.8",
"webpack-dev-server": "^3.1.4",
"webpack-merge": "^4.1.3"
},
"dependencies": {
"moment": "^2.22.1",
"react": "^16.4.1",
"react-dom": "^16.4.1",
"react-redux": "^5.0.7",
"react-router-dom": "^4.2.2",
"redux": "^4.0.0"
}
}
我的问题是:当你运行npm run build
时,这个244KiB是不是每个项目都不应该达到的值?我的值是warning中推荐的默认值的两倍。
如果我的值太大,我还应该怎么做才能使它变小呢?
发布于 2018-07-10 11:31:18
我打赌这是JS库的时刻。我也有同样的问题。按照我在this post上写的说明,让我知道这是否有帮助。
请注意,您可以用这种方式传递属性和数据
return React.createElement(Moment.default, {format:'MM/DD/YY'}, data)
https://stackoverflow.com/questions/50984192
复制相似问题