懒装只卸载的块与webpack的差异

Question

我正在使用require.ensure来创建块，这些块是根据角度SPA中的路由懒惰地加载的。我不使用任何特殊的延迟加载插件的角度，只是用户界面路由器的决心。

块#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？ 2.Signup.js？

如果从{1,2} -> {1}导航，则不发出请求，因为{1,2}满足了{1}。但是，如果选择{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目前无法自动做到这一点，但这是一种手动方式的想法：

完全未经测试，相当讨厌，但它可能解决您的问题，为这一特殊情况。

// 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');

}