react.js - 用webpack开发react单页面应用程序，部署文件过大？

问题描述

问 题

项目开发，部署时文件过大，优化之后还有2M多，不知道哪位大神可以再给些指点。
webpack配置文件：

var webpack = require('webpack');
var path = require('path');
var ExtractTextPlugin = require('extract-text-webpack-plugin');
var uglifyJsPlugin = webpack.optimize.UglifyJsPlugin;
var HtmlWebpackPlugin = require('html-webpack-plugin');
var CompressionWebpackPlugin = require('compression-webpack-plugin');

module.exports = {
    devtool: false,
    entry:{
    "index": path.resolve(__dirname, './index.jsx'),
    "common": ['react','react-dom','react-router','echarts','antd','echarts-for-react','jquery']
  },
  output: {
    path: 'public',
    filename: 'bundle.js',
    publicPath: '/'
  },
  module: {
    loaders: [{
        exclude: /node_modules/,
        test: /\.jsx?$/,
        loader: 'babel',
        query: {
            presets: ['es2015', 'react']
        }
    }, {
        test: /\.less$/,
        loader: 'style-loader!css-loader!less-loader'
    },{   
        test: /\.css$/, 
        loader: 'style-loader!css-loader'
    },{
        test: /\.(png|jpe?g|gif)$/,
        loader: 'url?limit=8192&name=img/[hash:8].[ext]'
    }, {
        //文件加载器，处理文件静态资源
        test: /\.(woff|woff2|ttf|eot|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/,
        loader: 'file?limit=10000&name=fonts/[hash:8].[ext]'
    }]
  },
 //  resolve: {
 //    modulesDirectories: ['node_modules', path.join(__dirname, './node_modules')],
 //    extensions: ['', '.js', '.jsx']
 //  },

    // resolveLoader:{
 //    modulesDirectories: ['node_modules', path.join(__dirname, './node_modules')],
 //  },

  plugins: [
    new webpack.DefinePlugin({
    'process.env.NODE_ENV': JSON.stringify('production')
    }),
    new uglifyJsPlugin({
        comments: false,
      compress: {
        warnings: false
      }
    }),
    new webpack.optimize.DedupePlugin(), //删除类似的重复代码
    new webpack.optimize.AggressiveMergingPlugin(),//合并块
    new webpack.optimize.CommonsChunkPlugin('common', 'common.js'),
    new ExtractTextPlugin('[name].[contenthash].css'),
    new CompressionWebpackPlugin({ //gzip 压缩
        asset: '[path].gz[query]',
         algorithm: 'gzip',
         test: new RegExp(
             '\\.(js|css)$'    //压缩 js 与 css
         ),
         threshold: 10240,
         minRatio: 0.8
      })
  ]
}

打包控制台输出：

common.js  1.98 MB       0  [emitted]  common
       bundle.js   2.6 MB       1  [emitted]  index
    common.js.gz   558 kB          [emitted]  
    bundle.js.gz   736 kB          [emitted]  
    

npm配置：

"dependencies": {
    "antd": "^2.5.3",
    "babel-core": "^6.21.0",
    "babel-loader": "^6.2.10",
    "babel-plugin-import": "^1.1.0",
    "babel-preset-es2015": "^6.18.0",
    "babel-preset-react": "^6.16.0",
    "babel-preset-stage-0": "^6.16.0",
    "bootstrap": "^3.3.6",
    "compression": "^1.6.2",
    "compression-webpack-plugin": "^0.4.0",
    "copy-webpack-plugin": "^4.0.1",
    "css-loader": "^0.26.1",
    "echarts": "^3.3.2",
    "echarts-for-react": "^1.1.6",
    "express": "^4.14.0",
    "extract-text-webpack-plugin": "^1.0.1",
    "file-loader": "^0.9.0",
    "html-webpack-plugin": "^2.28.0",
    "http-server": "^0.9.0",
    "if-env": "^1.0.0",
    "jquery": "^2.2.4",
    "less": "^2.7.1",
    "less-loader": "^2.2.3",
    "open-browser-webpack-plugin": "0.0.5",
    "plupload": "^2.2.1",
    "qiniu-js": "^1.0.14-beta",
    "react": "^15.4.1",
    "react-dom": "^15.4.1",
    "react-router": "^3.0.0",
    "react-summernote": "^1.0.5",
    "reqwest": "^2.0.5",
    "style-loader": "^0.13.1",
    "summernote": "^0.8.2",
    "tether": "^1.4.0",
    "url-loader": "^0.5.7",
    "webpack": "^1.14.0",
    "webpack-dev-server": "^1.16.2"
  }

还可以继续优化么？

解决方案

按照路由拆分一下chunk呢？
用require.ensure和react-router的getComponent

另外建议echarts这样是第三方依赖可以从cdn获取。

具体怎么优化可以参照一下这个

这篇关于react.js - 用webpack开发react单页面应用程序，部署文件过大？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！