Question

当我构建我的bundle（开发工作正常）时，我发现两个块（名称以0和1开头;分别为1.08Mb和1.07Mb）几乎完全相似。块1的内容完全被块0的内容覆盖，而块0略大，包含额外的子vue组件。对我来说，将child.vue组件导入parent.vue组件时，似乎再次包含了child.vue组件的所有导入。我以为webpack会把它除掉......但显然不是。

parent.vue组件：

<script type='text/babel'>
import Child from './Child.vue'

export default {
  name: 'parent',
  components: {Child}
}

</script>

child.vue组件的相关部分：

<script type='text/babel'>
import turf from 'turf'
import {resize} from '@most/dom-event' 

[[etc]]

<\ n>在router.js中：

  routes: [
    { path: '/parent', component: load('parent') },
    { path: '/', component: load('Index') }, // Default
    { path: '*', component: load('Error404') } // Not found
  ]
})

我也希望来自node_modules的草皮和所有其他npm包进入一个单独的供应商块，但它们都在块0和1中:(即没有供应商块）：

Hash: 1b94a25680bff29f4960
Version: webpack 2.2.0
Time: 44975ms
                                   Asset       Size      Chunks                    Chunk Names
            js/5.ceea6d62238ac33ab65a.js  987 bytes        5, 8  [emitted]         
fonts/MaterialIcons-Regular.012cf6a.woff    57.6 kB              [emitted]         
            js/1.00c968884dd42ca9abe7.js    1.07 MB        1, 8  [emitted]  [big]  
            js/2.a15df363f7a95520359b.js    6.28 kB  2, 3, 5, 8  [emitted]         
            js/3.09b86cd9939dea1b32d0.js    2.53 kB        3, 8  [emitted]         
            js/4.1de965c7ddc632ca7966.js    1.95 kB        4, 8  [emitted]         
            js/0.5c94c88f8cc301c30326.js    1.08 MB     0, 1, 8  [emitted]  [big]  
                            js/vendor.js     562 kB        6, 8  [emitted]  [big]  vendor
                               js/app.js    9.68 kB        7, 8  [emitted]         app
                          js/manifest.js    1.58 kB           8  [emitted]         manifest
app.8a73cdb0886334e9bc2ff358859b1203.css     246 kB        7, 8  [emitted]         app
                              index.html  616 bytes              [emitted]         

Process finished with exit code 0

我做错了什么？：

为什么我的块中有重复的代码？
为什么node_module库不在供应商块中？

Answer 1

当我摆脱路线中的加载功能时，它按预期工作（并且供应商块也是预期的），我得到：

Hash: 44e71b7f99a8c23f744a
Version: webpack 2.2.0
Time: 37300ms
                                   Asset       Size  Chunks                    Chunk Names
fonts/MaterialIcons-Regular.012cf6a.woff    57.6 kB          [emitted]         
                            js/vendor.js    1.59 MB    0, 2  [emitted]  [big]  vendor
                               js/app.js    41.6 kB    1, 2  [emitted]         app
                          js/manifest.js    1.43 kB       2  [emitted]         manifest
app.1b4a3bd6bcac26b9462e4d297ad634b4.css     270 kB    1, 2  [emitted]  [big]  app
                              index.html  616 bytes          [emitted]         

Process finished with exit code 0

我从here获得了加载函数。

并且还找到了这种处理其他回购路线的方式，所以可能它有用。我会问问题。

使用vue组件复制webpack（2.2.0）块

1 个答案: