为什么我的bundle.js这么大？
我的配置文件有什么问题？
我的所有React项目的文件大小都非常大（bundle.js是7.58 mb）。 我不知道为什么这么大。 我已经有了uglifyJS，但这似乎没有什么帮助。
以下是详细信息：
bundle.js 7.58 MB 0 [emitted] main index.html 942 bytes [emitted]我的webpack.config.js
const webpack = require('webpack'); const htmlWebpackPlugin = require('html-webpack-plugin'); const path = require('path'); const BUILD_DIR = path.resolve(__dirname, 'dist'); const APP_DIR = path.resolve(__dirname, 'src/components'); const DATA_DIR = path.resolve(__dirname, 'data'); const config = { entry: APP_DIR + '/App.jsx', output: { path: BUILD_DIR, filename: 'bundle.js' }, module: { loaders: [ { test: /\.jsx?/, include: APP_DIR, loader: [ 'babel' ], query: { presets: ["es2015", "react"] } }, { test: /\.css$/, loader:'style-loader!css-loader?importLoaders=1!postcss-loader' }, { test:/\.scss$/, loader:'style-loader!css-loader?importLoaders=1!postcss-loader!sass-loader' }, { test: /\.html/, loader:'html-loader' }, { test: /\.(json)([\?]?.*)$/, include: DATA_DIR, loader: "file-loader", query:{ name:"data/[name].[ext]" } }, { test: /\.(eot|woff|woff2|svg|ttf)([\?]?.*)$/, loader: "file-loader", query:{ name:"asserts/fonts/[name].[ext]" } }, { test: /\.(gif|png|jpe?g)$/i, include: DATA_DIR, loader: "file-loader", query:{ name:"data/images/[name]-[hash:5].[ext]" } } ] }, postcss:[ require('autoprefixer')({ broswers:['last 5 versions'] }) ], devtool:'eval-source-map', devServer:{ historyApiFallback:true, hot:true, inline:true, proxy:{ '/api/*':{ target:'http://localhost:8081', secure:false } } }, plugins: [ new webpack.optimize.OccurenceOrderPlugin(), new webpack.optimize.UglifyJsPlugin({ compressor: { warnings: false } }), new htmlWebpackPlugin({ filename: 'index.html', template: 'index.html', title:'this is a title', //一个title 属性 inject:'body' }) ] }; module.exports = config;我的package.json
{ "name": "react-demo", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "start": "webpack-dev-server --progress --profile --colors --hot --inline --port 3000 --host 0.0.0.0", "dev": "webpack -d --watch", "webpack": "webpack -p --config webpack.config.js --colors --display-reasons --display-error-details --display-modules --sort-modules-by size" }, "author": "Sharp", "license": "MIT", "dependencies": { "babel-core": "^6.2.1", "babel-loader": "^6.2.0", "babel-preset-es2015": "^6.1.18", "babel-preset-react": "^6.1.18", "react": "^0.14.3", "react-dom": "^0.14.3", "webpack": "^1.12.8" }, "devDependencies": { "autoprefixer": "^6.7.7", "axios": "^0.15.3", "babel-plugin-import": "^1.1.1", "babel-plugin-transform-runtime": "^6.23.0", "css-loader": "^0.27.3", "extract-text-webpack-plugin": "^2.1.0", "file-loader": "^0.10.1", "history": "^4.6.1", "html-loader": "^0.4.5", "html-webpack-plugin": "^2.28.0", "lodash": "^4.17.4", "node-sass": "^4.5.0", "postcss-loader": "^1.3.3", "react-addons-update": "^15.4.2", "react-bootstrap": "^0.30.8", "react-bootstrap-datetimepicker": "0.0.22", "react-redux": "^5.0.3", "react-router": "^3.0.2", "redux": "^3.6.0", "redux-logger": "^2.8.2", "redux-thunk": "^2.2.0", "remove": "^0.1.5", "sass-loader": "^6.0.3", "scss-loader": "0.0.1", "style-loader": "^0.14.1", "webpack-dev-server": "^1.16.3" } }有没有人有任何想法如何解决这个问题？
Why is my bundle.js so large?
What is wrong with my configuration file?
All my React projects tend to be incredibly large in file size (bundle.js is 7.58 mb). I have no idea why is it this large. I already have uglifyJS on, but this doesn't seem to help a lot.
Here are the details:
bundle.js 7.58 MB 0 [emitted] main index.html 942 bytes [emitted]My webpack.config.js
const webpack = require('webpack'); const htmlWebpackPlugin = require('html-webpack-plugin'); const path = require('path'); const BUILD_DIR = path.resolve(__dirname, 'dist'); const APP_DIR = path.resolve(__dirname, 'src/components'); const DATA_DIR = path.resolve(__dirname, 'data'); const config = { entry: APP_DIR + '/App.jsx', output: { path: BUILD_DIR, filename: 'bundle.js' }, module: { loaders: [ { test: /\.jsx?/, include: APP_DIR, loader: [ 'babel' ], query: { presets: ["es2015", "react"] } }, { test: /\.css$/, loader:'style-loader!css-loader?importLoaders=1!postcss-loader' }, { test:/\.scss$/, loader:'style-loader!css-loader?importLoaders=1!postcss-loader!sass-loader' }, { test: /\.html/, loader:'html-loader' }, { test: /\.(json)([\?]?.*)$/, include: DATA_DIR, loader: "file-loader", query:{ name:"data/[name].[ext]" } }, { test: /\.(eot|woff|woff2|svg|ttf)([\?]?.*)$/, loader: "file-loader", query:{ name:"asserts/fonts/[name].[ext]" } }, { test: /\.(gif|png|jpe?g)$/i, include: DATA_DIR, loader: "file-loader", query:{ name:"data/images/[name]-[hash:5].[ext]" } } ] }, postcss:[ require('autoprefixer')({ broswers:['last 5 versions'] }) ], devtool:'eval-source-map', devServer:{ historyApiFallback:true, hot:true, inline:true, proxy:{ '/api/*':{ target:'http://localhost:8081', secure:false } } }, plugins: [ new webpack.optimize.OccurenceOrderPlugin(), new webpack.optimize.UglifyJsPlugin({ compressor: { warnings: false } }), new htmlWebpackPlugin({ filename: 'index.html', template: 'index.html', title:'this is a title', //一个title 属性 inject:'body' }) ] }; module.exports = config;My package.json
{ "name": "react-demo", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "start": "webpack-dev-server --progress --profile --colors --hot --inline --port 3000 --host 0.0.0.0", "dev": "webpack -d --watch", "webpack": "webpack -p --config webpack.config.js --colors --display-reasons --display-error-details --display-modules --sort-modules-by size" }, "author": "Sharp", "license": "MIT", "dependencies": { "babel-core": "^6.2.1", "babel-loader": "^6.2.0", "babel-preset-es2015": "^6.1.18", "babel-preset-react": "^6.1.18", "react": "^0.14.3", "react-dom": "^0.14.3", "webpack": "^1.12.8" }, "devDependencies": { "autoprefixer": "^6.7.7", "axios": "^0.15.3", "babel-plugin-import": "^1.1.1", "babel-plugin-transform-runtime": "^6.23.0", "css-loader": "^0.27.3", "extract-text-webpack-plugin": "^2.1.0", "file-loader": "^0.10.1", "history": "^4.6.1", "html-loader": "^0.4.5", "html-webpack-plugin": "^2.28.0", "lodash": "^4.17.4", "node-sass": "^4.5.0", "postcss-loader": "^1.3.3", "react-addons-update": "^15.4.2", "react-bootstrap": "^0.30.8", "react-bootstrap-datetimepicker": "0.0.22", "react-redux": "^5.0.3", "react-router": "^3.0.2", "redux": "^3.6.0", "redux-logger": "^2.8.2", "redux-thunk": "^2.2.0", "remove": "^0.1.5", "sass-loader": "^6.0.3", "scss-loader": "0.0.1", "style-loader": "^0.14.1", "webpack-dev-server": "^1.16.3" } }Does anyone have any idea how to fix this?
最满意答案
警告 ：OP的配置是一个webpack v1配置，而我的答案是v2。
您正在使用包中包含的源映射类型：
devtool:'eval-source-map'
这种类型的源地图仅用于开发，所以如果包的大小很大，则不是问题。 因此，配置文件本身没有任何问题，您只需要为开发和生产制作两个单独的配置（可能都是执行基本配置），并在两者中使用不同的源映射类型。
有关应在生产和开发中使用的源映射类型，请参阅https://webpack.js.org/configuration/devtool/ 。 对于生产，你可以使用像cheap-source-map这样的东西，或者根本不使用源地图。
通常，源映射可以作为独立的bundle / chunk输出或者包含在代码包本身中，并且具有不同的细节级别，从行/列信息到根本没有源映射。 这取决于您决定生产中需要多少调试信息，以及您是否可以公开获取源。
Caveat: OP's config is a webpack v1 config, while my answer is for v2.
You are using the type of source maps that are contained in the bundle itself:
devtool:'eval-source-map'
This type of source maps is for developmnent only, so if the bundle size is huge it's not an issue. So nothing is wrong with you configuration file per se, you just have to make two separate configs (maybe both exending a base config) for development and production, and use different source maps types in both.
See https://webpack.js.org/configuration/devtool/ for source map types that should be used in production and development. For production you could use something like cheap-source-map or not use source maps at all.
Generally source maps can be output as a standalone bundle/chunk or be contained in the code bundle itself, and have different levels of detail, from line/column info to no source maps at all. This is up to you to decide how much debugging info you need in production and if you are ok with making your sources publicly available.
更多推荐
发布评论