lyyourc / webpack-code-splitting-demo

webpack code splitting & long term cache

77 stars 17 forks source link

webpack升级后问题 #2

Open LikeDege opened 7 years ago

LikeDege commented 7 years ago

webpack 2.6.1及以上版本，配置async或children不指定names时不能抽取公共代码，不知道是不是webpack的bug，还是说现在不得不指定names了？

lyyourc commented 7 years ago

嗯，我有空研究一下。

lyyourc commented 7 years ago

4850

lemonleon commented 7 years ago

webpack2.6.1版本，我配置了async，但是打包的时候，需要异步引用两层才能把异步的公共代码提取出来。比如在a.js里面，import('./b')，b里面的引用包括node_modules里面的模块都不会打包出来，当b再异步引用c的时候，这时候c里面的引用包括node_modules才能被打包，这是什么原因呢？

lemonleon commented 7 years ago

刚刚发现了问题所在，如果设置 name: 'entry.name', 那么b里面的引用都会被打包出来，但是c里面的引用就不会打包出来了。。难道不能把b和c里面的引用都打包出来吗？

myst729 commented 6 years ago

@LikeDege @lemonleon

Webpack 2.5 以后 async chunk 需要指定 name。和 entry 同名就可以了：

    new webpack.optimize.CommonsChunkPlugin({
+     name: 'app',
      async: 'common-in-lazy',
      minChunks: ({ resource } = {}) => (
        resource &&
        resource.includes('node_modules') &&
        /axios/.test(resource)
      ),
    }),

    new webpack.optimize.CommonsChunkPlugin({
+     name: 'app',
      async: 'used-twice',
      minChunks: (module, count) => (
        count >= 2
      ),
    }),