用webpack打包后的文件为什么会非常大?

#1

用Webpack 打包 React+Jsx 的文件为什么会很大呢?
打包后的文件build.js:2000多kb
源文件:5K
用webpack命令(没压缩),结果build.js 2996kb
用webpack -p 命令(压缩),结果build.js 2188kb

文件都非常大(当然node_modules/react下的那些文件本身就非常大。)
2000多kb的文件直接在页面引入好吗?
有没有办法进一步压缩呢?

2 Likes
#2

里边是有什么模块啊, 除了 React?

#3

第一,不要把react打包进去,webpack打包出来的比facebook的lib文件体积要大
第二,贴个package.json来看看

#4

就三个模块
react、react-router、jquery

#5

jquery……

#6
{
  "name": "www.test.com",
  "version": "1.0.0",
  "description": "www.test.com",
  "scripts": {
    "start": "node server.js",
    "lint": "eslint src"
  },
  "repository": {
    "type": "git",
    "url": ""
  },
  "keywords": [
    "react",
    "reactjs",
    "boilerplate",
    "hot",
    "reload",
    "hmr",
    "live",
    "edit",
    "webpack"
  ],
  "author": "",
  "license": "MIT",
  "bugs": {
    "url": ""
  },
  "homepage": "",
  "devDependencies": {
    "babel-core": "^5.4.7",
    "babel-eslint": "^3.1.9",
    "babel-loader": "^5.1.2",
    "eslint-plugin-react": "^2.3.0",
    "react-hot-loader": "^1.2.7",
    "webpack": "^1.9.6",
    "webpack-dev-server": "^1.8.2"
  },
  "dependencies": {
    "react": "^0.13.0"
  }
}

package.json文件

#7

webpack.config.js文件

var path = require('path');
var webpack = require('webpack');

module.exports = {
  devtool: 'inline-source-map',
  entry: [
    'webpack-dev-server/client?http://localhost:3000',
    'webpack/hot/only-dev-server',
    './public/index'
  ],
  output: {
    path: path.join(__dirname, 'dist'),
    filename: 'bundle.js',
    publicPath: '/static/'
  },
  plugins: [
    new webpack.HotModuleReplacementPlugin(),
    new webpack.NoErrorsPlugin()
  ],
  resolve: {
    extensions: ['', '.js', '.jsx']
  },
  module: {
    loaders: [{
      test: /\.jsx?$/,
      loaders: ['react-hot', 'babel'],
      include: path.join(__dirname, 'src')
    }]
  }
};
#8

你的dependencies里没有 react-router、jquery,打包应该不行的啊

#9

jquery的源码应该会比较大的,这些比较公用的库个人建议最好不要打包,做cdn

#10

webpack 打包的时候是会把 package.json里面的依赖项打包吗??
还是只是打包webpack.config.js里面配置的入口文件、和对应的loader呢??

#11

开了inline-source-map当然大

#12

生产环境,请使用
devtool: false

1 Like
#13

开了source-map的问题

#14

2MB ? 我的打包出来200KB (压缩后)

#15

已解决。如上关闭source-map功能。
打包后,200多KB.
thank you everybody

1 Like
#16

可是还是变大了啊,就如你说的,本来只有5K,现在有200多K.为什么还要打包

#17

为什么还用jq?

建议看看这个
you dont need jq