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的输出看起来大致如下：

资产-------- Chunk

app.js ------- 0

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

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

如果我从{1,2}导航 - > {1}，我没有提出任何要求，因为{1,2}满足{1,2}。但如果我去{1} - ＆gt; {1,2}，我收到{1,2}的所有内容，而不仅仅是一个包含{2}的块。

有没有办法让我只能从Webpack的块中获得“unloaded chunk diff”？

我尝试过以这种方式使用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');

}

仅使用webpack

1 个答案: