Webpack代碼拆分：它做什麼？似乎沒有效果

新的webpack和反應在這裏。我遵循這個medium article在反應路由器中創建代碼拆分。它似乎沒有效果，但因爲我的應用程序仍然需要在初始頁面加載時同步加載整個bundle.js文件。任何提示，以減少這種加載時間？ bundle.js在dev中爲2.2mb，但在uglifying之後的時候，prod爲大約400kb。Webpack代碼拆分：它做什麼？似乎沒有效果

模擬網絡選項卡上普通的3G連接

router.js

export default [ 
    { 
    path: '/', 
    component: App, 
    childRoutes: [ 
     { 
     path: 'signup', 
     getComponent(location, cb) { 
      System.import('./modules/App/components/Authentication/Login.js') 
      .then(loadRoute(cb)) 
      .catch(errorLoading); 
     } 
     } 
    ] 
    } 
]

來源

2016-12-25 Clement

嘗試這些插件，以減少您的重複代碼

plugins: [ 
     new webpack.optimize.DedupePlugin(), 
     new webpack.optimize.UglifyJsPlugin() 
    ],

Deduce插件會查找重複的文件和代碼並將它們合併到一個單元中。 Uglify插件將在生產中醜化您的代碼。

來源

2016-12-25 06:03:10

這肯定減少了bundle.js文件的大小，但我很擔心，因爲它變得越來越大的bundle.js文件的此同步加載真的會阻礙負載時間:( – Clement

使用異步加載，如果你需要不可阻擋的加載 –

有沒有辦法將bundle.js文件拆分成幾個其他文件？ – Clement

所以我瀏覽了webpack文檔並使用了幾個插件。管理文件大小下降

從2.2mb到92kb，並加快了10倍的加載時間。

這是我的webpack.config文件。

module.exports = { 
    entry: { 
    js: [ './src/index.js' ], 
    vendor: [ 
     'react', 'react-router', 'react-redux', 'toastr', 'lodash' 
    ] 
    }, 

    output: { 
    path: path.join(__dirname, '/dist/prod'), 
    publicPath: '/dist/prod', 
    filename: 'bundle.js' 
    }, 

    plugins: [ 
     new webpack.optimize.CommonsChunkPlugin({ 
     name: 'vendor', 
     filename: 'vendor.js', 
     minChunks: Infinity, 
     }), 
     new ExtractTextPlugin("styles.css"), 
     new webpack.optimize.DedupePlugin(), 
     new CompressionPlugin({ 
      asset: "[path].gz[query]", 
      algorithm: "gzip", 
      test: /\.js$|\.html$/, 
      threshold: 10240, 
      minRatio: 0.8 
     }), 
     new webpack.optimize.UglifyJsPlugin(), 
    ], 

    module: { 
    rules: ... 
    } 
}

編輯：從谷歌移動字體，以本地字體文件夾，從喜歡簡單網庫刪除重複的字體電話和使用的@ font-臉後，好不容易纔真正減少加載時間。

現在5.5s在普通的3G相比27s之前。加載時間減少80 +％。

來源

2016-12-25 07:19:21 Clement

Webpack代碼拆分：它做什麼？似乎沒有效果

回答

相關問題