vue+webpack如何打包才能最大程度的不影响线上的代码?

Question

使用vue init webpack demo生成项目模板,
在/src/components目录下新建a.vue,随便新增一点内容,代码如下:

<template>
    <div>component 1</div>
</template>
<script>
    export default {
        data(){
            return {

            }
        },
        methods:{
            getData () {
                console.log(1);
            }
        },
        mounted(){
            this.getData();
        }
    }
</script>

<style scoped >
    .box {
        width: 1px;
        height: 10px;
        background-color: #ccc;
    }
</style>

修改/src/router/index.js,使用路由懒加载加载响应的组件,代码如下:

import Vue from 'vue'
import Router from 'vue-router'

const HelloWorld = () => import('@/components/HelloWorld')
const A = () => import('@/components/a.vue')
Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'HelloWorld',
      component: HelloWorld
    },
    {path: '/a',name: 'A',component: A},
  ]
})

修改/config/index.js中的build.productionSourceMap=false,打包不生成对应的map文件,命令行执行命令:npm run build,得到对应的dist文件夹,内容如下:

继续在/src/components目录下新建b.vue,代码如下:

<template>
    <div>component B</div>
</template>
<script>
    export default {
        data(){
            return {

            }
        },
        methods:{
            fetchData (page) {
                console.log(page);
            }
        },
        mounted(){
            this.fetchData(2);
        }
    }
</script>

<style scoped >
    .box {
        width: 1px;
        height: 10px;
        background-color: red;
    }
</style>

新增对应的路由:

import Vue from 'vue'
import Router from 'vue-router'

const HelloWorld = () => import('@/components/HelloWorld')
const A = () => import('@/components/a.vue')
const B = () => import('@/components/b.vue')

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'HelloWorld',
      component: HelloWorld
    },
    {path: '/a',name: 'A',component: A},
    {path: '/b',name: 'B',component: B},
  ]
})

命令行执行npm run build 打包,结构目录如下:

使用代码根据对比两次打包之后的结果,
0.edeec9e7398311b1e3f1.js vs 0.4f388e450a65c74371bf.js
结果是代码完全不一样

而第一次打包生成的0.edeec9e7398311b1e3f1.js对应的第二次打包的文件,其实是1.a79f1cfd1b16dba782c6.js,即便如此,可是代码也有稍微的变化,文件名也发生了变化

问题:这只是模拟的一个微场景,实际工作中,我们已经开发了40多个路由以及对应的N多组件,并且是将打包生成的dist文件放在另外一个git仓库(在这个仓库里面的静态资源我们做了CDN缓存);
现在接到需求新增了一个路由,打包一下,通过git提交,发现dist目录下面的文件完全变化了,也就是,之前做的CDN缓存也完全没有任何作用啦;
如何最大程度的保证后面的打包不影响上一次打包之后的文件名和文件内容呢?

Answer 1

就是因为每次修改都要全部打包，影响太大，所以我们公司就放弃了spa