2015-10-16 51 views
3

我已经尝试了许多不同的事情来得到这个工作,但没有成功,我可以得到reactjs了我的WebPack构建和用作外部:作出反应,的WebPack对外依存度

这里是我的WebPack文件:

plugins: [ 
    new webpack.NoErrorsPlugin(), 
    new webpack.ProvidePlugin({ 
     $: "jquery", 
     jQuery: "jquery", 
     "windows.jQuery": "jquery" 
    }), 
    new ExtractTextPlugin("[name]-[hash].css", {allChunks: true}), 
    new webpack.optimize.DedupePlugin(), 
    new webpack.optimize.UglifyJsPlugin({ 
      compressor: { 
       warnings: false 
      } 
     }), 
    new webpack.optimize.OccurenceOrderPlugin(), 
    new webpack.optimize.AggressiveMergingPlugin(), 
    webpack_isomorphic_tools_plugin 
    ], 
    externals: { 
    'jquery': 'jQuery', 
    'jquery': '$', 
    'react': 'React', 
    'react-dom': 'ReactDOM', 
    'keen-js': 'Keen', 
    'immutable': 'Immutable', 
    'superagent': 'superagent' 
    }, 

和我的体型分析:

react: 597.97 kB (49.8%) 
    fbjs: 32.85 kB (5.49%) 
    <self>: 32.85 kB (100%) 
    <self>: 565.12 kB (94.5%) 
babel-core: 132.01 kB (11.0%) 
    core-js: 111.1 kB (84.2%) 
    <self>: 111.1 kB (100%) 
    <self>: 247 B (0.183%) 
fluxible: 52.13 kB (4.34%) 
    dispatchr: 24.77 kB (47.5%) 
    eventemitter3: 7 kB (28.3%) 
     <self>: 7 kB (100%) 
    inherits: 672 B (2.65%) 
     <self>: 672 B (100%) 
    <self>: 17.11 kB (69.1%) 
    setimmediate: 6.24 kB (12.0%) 
    <self>: 6.24 kB (100%) 
    is-promise: 165 B (0.309%) 
    <self>: 165 B (100%) 
    <self>: 20.97 kB (40.2%) 
fluxible-router: 50.76 kB (4.23%) 
    routr: 18.22 kB (35.9%) 
    path-to-regexp: 9.25 kB (50.7%) 
     isarray: 120 B (1.27%) 
     <self>: 120 B (100%) 
     <self>: 9.13 kB (98.7%) 
    <self>: 8.97 kB (49.3%) 
    query-string: 1.52 kB (2.99%) 
    strict-uri-encode: 168 B (10.8%) 
     <self>: 168 B (100%) 
    <self>: 1.35 kB (89.2%) 
    hoist-non-react-statics: 854 B (1.64%) 
    <self>: 854 B (100%) 
    inherits: 672 B (1.29%) 
    <self>: 672 B (100%) 
    <self>: 29.53 kB (58.2%) 
bootstrap-sass: 33.37 kB (2.78%) 
    <self>: 33.37 kB (100%) 
promise: 20.78 kB (1.73%) 
    asap: 11.43 kB (55.0%) 
    <self>: 11.43 kB (100%) 
    <self>: 9.35 kB (45.0%) 
react-paginate: 17.27 kB (1.44%) 
    classnames: 988 B (5.59%) 
    <self>: 988 B (100%) 
    react-addons-create-fragment: 59 B (0.334%) 
    <self>: 59 B (100%) 
    <self>: 16.25 kB (94.1%) 
fluxible-addons-react: 16.84 kB (1.40%) 
    hoist-non-react-statics: 854 B (4.95%) 
    <self>: 854 B (100%) 
    <self>: 16 kB (95.0%) 
debug: 9.95 kB (0.829%) 
    ms: 2.28 kB (22.9%) 
    <self>: 2.28 kB (100%) 
    <self>: 7.67 kB (77.1%) 
react-cookie: 5.05 kB (0.420%) 
    cookie: 3.29 kB (65.3%) 
    <self>: 3.29 kB (100%) 
    <self>: 1.75 kB (34.7%) 
webpack: 4.06 kB (0.338%) 
    <self>: 0 B (0.00%) 
superagent-promise: 2.65 kB (0.221%) 
    <self>: 2.65 kB (100%) 
copy-to-clipboard: 1.92 kB (0.160%) 
    toggle-selection: 807 B (41.0%) 
    <self>: 807 B (100%) 
    <self>: 1.13 kB (59.0%) 
react-google-analytics: 1.58 kB (0.132%) 
    <self>: 1.58 kB (100%) 
classnames: 1.08 kB (0.0900%) 
    <self>: 1.08 kB (100%) 
react-dom: 63 B (0.00512%) 
    <self>: 63 B (100%) 
babel: 49 B (0.00398%) 
    <self>: 49 B (100%) 
<self>: 253.4 kB (21.1%) 

正如你所看到的,反应是我的身材高达49.8%!和400kb的构建,这是很多。任何想法如何让这与外部合作?

+0

您想减少webpack构建时间或减少整体包装大小? 400kb与我们所有的互联网速度相比并不算什么,无论如何,您将需要下载这些文件甚至缩小到在客户端浏览器上运行应用程序 –

回答

0

这不完全是你要求的,但自从你提出想法:看看https://github.com/insin/nwb。它对创建React组件和库有很好的支持。它使用引擎盖下的webpack。

相关问题