使用 webpack 延迟加载仅卸载的块差异

Question

我正在使用require.ensure 创建块，这些块是基于 Angular SPA 中的路由延迟加载的。我没有为 Angular 使用任何特殊的延迟加载插件，只是 ui-router 的解析。

Chunk #2 需要 #1 的内容。例如：

require.ensure([], function(require) {
   require('shop/shop');         // Creates chunk 1
}, 'Shop');

require.ensure([], function(require) {
   require('signup/signup');      // Creates chunk 2
}, 'Signup');

// signup/signup.js
define([
  '_auth.scss',
  'shop/shop'                    // Chunk 2 depends on chunk 1
], function() { });

我的 webpack 输出大致如下：

资产 -------- 块

app.js ------- 0

1.Shop.js ---------- 1

2.Signup.js ---------- 1,2

如果我从 {1,2} -> {1} 导航，我不会提出任何请求，因为 {1} 已满足 {1,2}。但如果我选择 {1} -> {1,2}，我会收到所有 {1,2} 而不仅仅是包含 {2} 的块。

有没有一种方法可以让我使用 Webpack 从一个块中只接收“未加载的块差异”？

我曾尝试以这种方式使用 CommonsChunkPlugin： https://github.com/webpack/webpack/tree/master/examples/extra-async-chunk

new webpack.optimize.CommonsChunkPlugin({
   name: 'main',
   async: true
})

但如果我使用“main”，那么不知何故我最终会得到一个巨大的最终包/块，它甚至比包含大部分供应商代码的入口点还要大。

如果目前 Webpack 不支持这一点，是否可以合理地假设可以编写一个插件来为“未加载块”的可能有效排列生成文件，然后在运行时加载正确的文件？

感谢您的任何见解！

我的 webpack.config.js：

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

process.env.UV_THREADPOOL_SIZE = 100;

var alias = {
  json3: 'json3/lib/json3',
  es5shim: 'es5-shim/es5-shim',
  angular: 'angular/angular',
  lodash: 'lodash/lodash',
  angularRoute: 'angular-ui-router/release/angular-ui-router',
  angularAnimate: 'angular-animate/angular-animate',
  moment: 'moment/moment',
  'angular-moment': 'angular-moment/angular-moment',
  'angular-cookies':  'angular-cookies/angular-cookies',
  'angular-encode-uri': 'angular-encode-uri/dist/angular-encode-uri',
  'angulartics-gtm': __dirname + '/app/vendor/angulartics/src/angulartics-gtm',
  angulartics: __dirname + '/app/vendor/angulartics/src/angulartics'
};

module.exports = {
  context: __dirname + '/app/scripts',
  entry: {
    app: 'bootstrap.js'
  },
  output: {
    path: __dirname + '/dist/scripts',
    filename: '[name].js',
    publicPath: '/scripts/'
  },
  plugins: [
    new webpack.ProvidePlugin({
      _: 'lodash'
    }),
    new webpack.optimize.DedupePlugin(),
    new webpack.ContextReplacementPlugin(
      /moment[\/\\]locale$/,
      /be|de\-at|de|en\-gb|es|fr|it|nl|pl|pt|pt\-br|ru|sv/
    )
  ],
  module: {
    loaders: [
      { test: /[\/]angular\.js$/, loader: 'exports?angular' },
      { test: /\.html$/, loader: 'html', include: __dirname + '/app/scripts' },
      { test: /\.scss$/, loader: 'style!css!sass', include: __dirname + '/app/styles/sass' },
      { test: /\.css$/, loader: 'style!css' },
      { test: /angular\-moment/, loader: 'imports?define=>false&angular&moment'},
      {
        test: /images\/.*\.svg$/i,
        loaders: [
            'file?name=[path][name].[ext]',
            'image-webpack?bypassOnDebug'
        ]
      }
    ]
  },
  resolve: {
    extensions: ['', '.js', '.html', '.scss', '.css', '.svg'],
    root: [ __dirname + '/app' ],
    modulesDirectories: [
      'vendor',
      'scripts',
      'styles/sass',
      'icons'
    ],
    alias: alias
  },
  noParse: Object.keys(alias),
  devtool: 'cheap-source-map'
};

Answer 1

目前无法使用 webpack 自动执行此操作，但这是手动方式的想法：

完全未经测试且非常 hacky，但它可能会解决您在这种特殊情况下的问题。

// chunk 1 loading (as before)

require.ensure([], function(require) {
   require('shop/shop');         // Creates chunk 1
}, 'Shop');

// chunk 2 loading:

// check if shop already loaded
if(require.resolveWeak("shop/shop") in __webpack_modules__) { 

  // the first require.ensure maps to chunk 1 but doesn't load anything
  // because it's already loaded
  require.ensure(['shop/shop'], function(require) {
    // the second require.ensure creates a child chunk and the optimization
    // removes all modules which are already in chunk 1
    require.ensure([], function(require) {
      require('signup/signup');      // Creates chunk 3 = 2 minus 1
    }, 'Signup2'); // important: other name (or no name)
  }, 'Shop');

} else {

  // full chunk load
  require.ensure([], function(require) {
    require('signup/signup');      // Creates chunk 2
  }, 'Signup');

}