Built result size is large

[aemoe]

感谢作者的组件~
发现个问题 在build时候构建出来的js非常大 应该是一些翻译的包 怎么去掉 不然打包完包太大 18MB左右

[aemoe]

I do not know why if I use react-intl-universal/lib/ js file is no problem,
but I import this packbag have some problem.

[cwtuan]

Could you show more detail of your wekpack config?

[aemoe]

@cwtuan
OK ~ This is my webpack config.

/**
  加载常用模块及Webpack需要的模块组件
**/
//加载Node的Path模块
const path = require('path'),
  //加载Node的fs模块
  fs = require('fs'),
  //加载webpack模块
  webpack = require('webpack'),
  //加载自动化css独立加载插件
  ExtractTextPlugin = require('extract-text-webpack-plugin'),
  //加载自动化HTML自动化编译插件
  HtmlWebpackPlugin = require('html-webpack-plugin'),
  autoprefixer = require('autoprefixer'),
  precss = require('precss'),
  postcsseasysprites = require('postcss-easysprites'),
  //加载JS模块压缩编译插件
  UglifyJsPlugin = webpack.optimize.UglifyJsPlugin,
  //加载公用组件插件
  CommonsChunkPlugin = webpack.optimize.CommonsChunkPlugin
  //加载公共json配置
  configJson = require('../config.json');

/**
  设置默认常用路径
**/
//srcDir为当前开发目录(默认:/src)
const srcDir = path.resolve(process.cwd(), 'src'),
  //assetsDir为当前建立目录(默认:/assets)
  assetsDir = path.resolve(process.cwd(), '../Frontend'),
  //读取入口的js文件目录(本目录只能对应页面的入口的JS,其他脚本需要写在/dist/plugins中)
  jsEntryDir = path.resolve(srcDir, 'dist/js'),
  //生成JS的目录地址(默认:)
  jsDir = 'dist/js/',
  //生成css的目录地址(默认:)
  cssDir = 'dist/css/';
  //载入默认配置

const config = {
  devtool: 'source-map',
  entry: {
    index: './src/index.js',
    vendor: [
      'react',
      'react-dom',
      'redux',
      'react-redux',
      'react-router-dom',
      'axios',
      'lodash',
      'react-paginate',
      'prop-types',
      'react-scrollbar',
      'validator',
      'redux-form',
      'redux-logger',
      'redux-thunk',
      'moment',
      'jquery'
    ]
  },
  output: {
    path: assetsDir,
    filename: jsDir + '[name].js',
    publicPath: configJson.publicPath
  },
  module: {
    //加载器配置
    rules: [
      {
        test: /\.css$/,
        include: [path.resolve(srcDir, cssDir)],
        use: ExtractTextPlugin.extract({
          fallback: 'style-loader',
          use: [
            {
              loader: "css-loader",
              options: {
                modules: true,
                camelCase: true,
                localIdentName: "[name]_[local]_[hash:base64:3]",
                importLoaders: 1,
                sourceMap: true
              }
            }, {
              loader: "postcss-loader",
              options: {
                sourceMap: true,
                plugins: () => [
                  precss(),
                  autoprefixer({
                    browsers: ['last 3 version', 'ie >= 10']
                  }),
                  postcsseasysprites({imagePath: '../img', spritePath: './assets/dist/img'})
                ]
              }
            }
          ]
        })
      }, {
        test: /\.css$/,
        exclude: [path.resolve(srcDir, cssDir)],
        use: ExtractTextPlugin.extract({
          fallback: 'style-loader',
          use: [
            {
              loader: "css-loader",
              options: {
                importLoaders: 1,
                sourceMap: true
              }
            }, {
              loader: "postcss-loader",
              options: {
                sourceMap: true,
                plugins: () => [
                  precss(),
                  autoprefixer({
                    browsers: ['last 3 version', 'ie >= 10']
                  }),
                  postcsseasysprites({imagePath: '../img', spritePath: './assets/dist/img'})
                ]
              }
            }
          ]
        })
      }, {
        test: /\.js$/,
        exclude: /node_modules/,
        use: [
          {
            loader: "babel-loader"
          }
        ]
      }, {
        test: /\.(png|jpeg|jpg|gif|svg|eot|woff|ttf|woff2)$/,
        use: [
          {
            loader: "file-loader",
            options: {
              name: 'dist/img/[name].[ext]'
            }
          }
        ]
      }
    ]
  },
  plugins: [
    new webpack.ProvidePlugin({
      $:"jquery",
      jQuery:"jquery",
      "window.jQuery":"jquery"
    }),
    new ExtractTextPlugin('dist/css/style.css'),
    new webpack.DefinePlugin({
      "process.env": {
        NODE_ENV: JSON.stringify("production")
      }
    }),
    new HtmlWebpackPlugin({
      template: 'src/index.html',
      inject: true,
      hash: true,
      minify: {
        removeComments: true,
        collapseWhitespace: false
      },
      chunks: [
        'index', 'vendor', 'manifest'
      ],
      filename: 'app.html'
    }),
    new webpack.optimize.CommonsChunkPlugin({
      names: [
        'vendor', 'manifest'
      ],
      filename: jsDir + '[name].js'
    }),
    new UglifyJsPlugin({
      // 最紧凑的输出
      beautify: true,
      // 删除所有的注释
      comments: true,
      compress: {
        // 在UglifyJs删除没有用到的代码时不输出警告
        warnings: true,
        // 删除所有的 `console` 语句
        // 还可以兼容ie浏览器
        drop_console: false,
        // 内嵌定义了但是只用到一次的变量
        collapse_vars: true,
        // 提取出出现多次但是没有定义成变量去引用的静态值
        reduce_vars: true
      }
    }),
    new webpack.NoEmitOnErrorsPlugin()
  ]
};

module.exports = config;

[aemoe]

@cwtuan 是呀 好奇怪 好像intal里面的local数据也被打包进去了 然后就突然特别大 不知道为什么好奇怪

[cwtuan]

I had reproduced this issue in webpack 3. And working on solving it.

[aemoe]

@cwtuan thank u very much～

[feicong666]

嗯，我也遇到了一样的问题，打包出来有20多M，删掉这个主键就正常了

[aemoe]

@feicong666 麻烦问下是怎么解决的~

[liuzhuonan]

The webpack decides whether to package a component based on dependencies. This should be the place to control the packaging of Locale-data (18M), but it does not work in webpack3.

at intl/index.js

  // Require all locale data for `Intl`. This module will be
  // ignored when bundling for the browser with Browserify/Webpack.
  // require('./locale-data/complete.js');

[liuzhuonan]

Here to determine isBrowser, in the case of false will quote lodale-data, comment out just fine.

at react-intl-universal/lib/index.js

       if (isBrowser) {
              if (isPolyfill) {
                load(SYS_LOCALE_DATA_URL + "/" + lang + ".js", function (err, script) {
                  if (err) {
                    reject(err);
                  } else {
                    resolve();
                  }
                });
              } else {
                resolve();
              }
            } else {
              require("intl/locale-data/jsonp/" + lang + ".js");
              resolve();
            }

[aemoe]

@liuzhuonan
The isBrowser option in Webpack 3.0 is does't work .
Thx~

[Slice-dd]

这个问题解决了么

[cwtuan]

@aemoe @feicong666 @liuzhuonan @Slice-dd @zhuzhaoyuan
Please upgrade to v1.3.4 to fix build issue.