Vue-element-admin: 项目打包后的代码有重复

[liaoyinglong]

操作步骤

1. 删除views下文件，只留下login
   
2. 清空路由表， 只留下login
   
3. 执行 yarn build:prod 生成打包文件，发现打包出来的js重复
   

预期

代码不重复打包

实际

代码重复

@PanJiaChen

[liaoyinglong]

请求的时候应该不会重复，不过我也没有测试。就是打包出来重复有点不太友好

[PanJiaChen]

什么叫js重复了？重复了什么？

[liaoyinglong]

可以看一下第三个图，打包出来的socialsignin组件的代码出现了两份

[PanJiaChen]

研究了一下主要是 https://github.com/PanJiaChen/vue-element-admin/blob/master/src/router/_import_production.js 这个导致的

webpack 默认会将 '@/views/' + file + '.vue 所有的文件打包一遍 虽然有些都没用到。
暂时你不管也没太大关系，它并不会执行重复的代码。
我之后考虑一下怎么优化吧

[liaoyinglong]

这样的话我这边就粗暴一点

在启动项目的时候动态写_import.js的内容。。简单粗暴有效

[PanJiaChen]

不是很明白你的意思。反正根据webpack文档

Every module that could potentially be requested on an import() call is included. For example, import(./locale/${language}.json) will cause every .json file in the ./locale directory to be bundled into the new chunk. At run time, when the variable language has been computed, any file like english.json or german.json will be available for consumption.

@/views/下的 .vue 文件都会被打包。
如果你的项目不打 就不要区分开发很线上环境 都直接使用 ()=>import() 的方式引入组件

[liaoyinglong]

@/views 下面的 .vue文件是需要打包，但是不用打包出来两份，虽然另外一份并不会被用到（指的是异步加载的时候并不会去请求）。

然后我现在的解决方法是

1. 在build下新建 根据环境写入动态 _import.js 的内容
   

1. 在生产环境和开发环境分别都要调用
   

2. 更改 router
   

这样做下来基本能满足我打包出来的东西不会被重复掉。虽然跟之前功能上并没有区别。纯属看上去不舒服而已

[PanJiaChen]

你测试过么？个人感觉这样好像不解决问题

[liaoyinglong]

测试没有问题。解决我提出的问题。
就是感觉不太优雅，只是个偏方觉得

[PanJiaChen]

我实际测试了一下。。。在prod环境下 还是会打冗余的包。。。通过截图你只是将 _import 动态生成，@/views下面的 .vue文件还是会打包。。。
方便提一个pr 让我来再测试一下么？

[liaoyinglong]

你是对的，@/views下面有多文件就会打包多少，不管有没有被引用。

先前测试还是不太严谨。

不过换个角度来说，@/views下面的文件基本都是需要被打包的，而我这个偏方解决的只是一个组件被打包两次的情况，如我最开始issue提的问题。

[PanJiaChen]

Fixed in https://github.com/PanJiaChen/vue-element-admin/pull/727

[wuyonggang100]

treeshaking应该可以解决吧,不用的就不打包