webpack4中的optimization.runtimeChunk是用来分离运行时的代码,我们看下面的例子来了解它的具体作用:

    分离不含import()的

    先看一个不包含import()的vue项目:

    1. /*---App.vue---*/
    2. <template>
    3.   <div id="app">
    4.     <div id="nav">
    5.       <router-link to="/about">About</router-link>
    6.     </div>
    7.     <router-view/>
    8.   </div>
    9. </template>
    10. /*---About.vue---*/
    11. <template>
    12.   <div class="about">
    13.     <h1>This is an about page</h1>
    14.   </div>
    15. </template>
    16. /*---router.js---*/
    17. mport About from '../views/About.vue'
    18. Vue.use(VueRouter)
    19. const routes = [
    20.   {
    21.     path: '/about',
    22.     name: 'about',
    23.     component:About
    24.   }
    25. ]

    打包,得到如下结果:

    然后我们配置vue.config.js:

    1. configureWebpack: {
    2.     optimization: {
    3.         runtimeChunk:{
    4.             name:()=>'aaa'
    5.         },
    6.     },
    7. }

    再一次打包:

    我们可以发现多了个aaa.***.js,它就是runtimeChunk配置的,是从app.***.js中分离出来的webpack相关代码,我们看看aaa.***.js内容:

    1. (function(e) {
    2.     function r(r) {
    3.         for(var n, l, a = r[0], i = r[1], f = r[2], c = 0, s = []; c < a.length; c++) l = a[c], Object.prototype.hasOwnProperty.call(o, l) && o[l] && s.push(o[l][0]), o[l] = 0;
    4.         for(in i) Object.prototype.hasOwnProperty.call(i, n) && (e[n] = i[n]);
    5.         p && p(r);
    6.         while(s.length) s.shift()();
    7.         return u.push.apply(u, f || []), t()
    8.     }
    9.     function t() {
    10.         for(var e, r = 0; r < u.length; r++) {
    11.             for(var t = u[r], n = !0, a = 1; a < t.length; a++) {
    12.     var i = t[a];
    13.     0 !== o[i] && (= !1)
    14.             }
    15.             n && (u.splice(r--, 1), e = l(l.= t[0]))
    16.         }
    17.         return e
    18.     }
    19.     var n = {},
    20.         o = {
    21.             aaa: 0
    22.         },
    23.         u = [];
    24.     function l(r) {
    25.         if(n[r]) return n[r].exports;
    26.         var t = n[r] = {
    27.             i: r,
    28.             l: !1,
    29.             exports: {}
    30.         };
    31.         return e[r].call(t.exports, t, t.exports, l), t.= !0, t.exports
    32.     }
    33.     l.= e, l.= n, l.= function(e, r, t) {
    34.         l.o(e, r) || Object.defineProperty(e, r, {
    35.             enumerable: !0,
    36.             get: t
    37.         })
    38.     }, l.= function(e) {
    39.         "undefined" !== typeof Symbol && Symbol.toStringTag && Object.defineProperty(e, Symbol.toStringTag, {
    40.             value: "Module"
    41.         }), Object.defineProperty(e, "__esModule", {
    42.             value: !0
    43.         })
    44.     }, l.= function(e, r) {
    45.         if(1 & r && (= l(e)), 8 & r) return e;
    46.         if(4 & r && "object" === typeof e && e && e.__esModule) return e;
    47.         var t = Object.create(null);
    48.         if(l.r(t), Object.defineProperty(t, "default", {
    49.     enumerable: !0,
    50.     value: e
    51.             }), 2 & r && "string" != typeof e)
    52.             for(var n in e) l.d(t, n, function(r) {
    53.     return e[r]
    54.             }.bind(null, n));
    55.         return t
    56.     }, l.= function(e) {
    57.         var r = e && e.__esModule ? function() {
    58.             return e["default"]
    59.         } : function() {
    60.             return e
    61.         };
    62.         return l.d(r, "a", r), r
    63.     }, l.= function(e, r) {
    64.         return Object.prototype.hasOwnProperty.call(e, r)
    65.     }, l.= "/";
    66.     var a = window["webpackJsonp"] = window["webpackJsonp"] || [],
    67.         i = a.push.bind(a);
    68.     a.push = r, a = a.slice();
    69.     for(var f = 0; f < a.length; f++) r(a[f]);
    70.     var p = i;
    71.     t()
    72. })([]);

    分离包含import()的

    我们将上面的About页面改成import引用的:

    1. /*---App.vue---*/
    2. <template>
    3.   <div id="app">
    4.     <div id="nav">
    5.       <router-link to="/about">About</router-link>
    6.     </div>
    7.     <router-view/>
    8.   </div>
    9. </template>
    10. /*---About.vue---*/
    11. <template>
    12.   <div class="about">
    13.     <h1>This is an about page</h1>
    14.   </div>
    15. </template>
    16. /*---router.js---*/
    17. Vue.use(VueRouter)
    18. const routes = [
    19.   {
    20.     path: '/about',
    21.     name: 'about',
    22.     component: () => import('../views/About.vue')
    23.   }
    24. ]

    打包,得到一下结果:

    因为About是通过import()引用的,因此打包的时候从app.***.js中分离出去了,app.***.js中含有About的打包信息:

    1. function u(e) {
    2.     return i.+ "js/" + ({
    3.         about: "about"
    4.     }[e] || e) + "." + {
    5.         about: "ab48dbb2"
    6.     }[e] + ".js"
    7. }

    如果About页面发生变化,about.***.js会变化,同时app.***.js也会变化,因为app.***.js中有一段About打包信息的代码。现在配置vue.config.js::

    1. configureWebpack: {
    2.     optimization: {
    3.         runtimeChunk:{
    4.             name:()=>'aaa'
    5.         },
    6.     },
    7. }

    重新打包,结果如下:

    同样分离出了aaa.***.js,它除了包含webpack相关代码,还分离出了About打包相关信息:

    1. (function(e) {
    2.     function r(r) {
    3.         for(var n, a, i = r[0], c = r[1], l = r[2], f = 0, s = []; f < i.length; f++) a = i[f], Object.prototype.hasOwnProperty.call(o, a) && o[a] && s.push(o[a][0]), o[a] = 0;
    4.         for(in c) Object.prototype.hasOwnProperty.call(c, n) && (e[n] = c[n]);
    5.         p && p(r);
    6.         while(s.length) s.shift()();
    7.         return u.push.apply(u, l || []), t()
    8.     }
    9.     function t() {
    10.         for(var e, r = 0; r < u.length; r++) {
    11.             for(var t = u[r], n = !0, a = 1; a < t.length; a++) {
    12.     var c = t[a];
    13.     0 !== o[c] && (= !1)
    14.             }
    15.             n && (u.splice(r--, 1), e = i(i.= t[0]))
    16.         }
    17.         return e
    18.     }
    19.     var n = {},
    20.         o = {
    21.             aaa: 0
    22.         },
    23.         u = [];
    24.     function a(e) {
    25.         return i.+ "js/" + ({
    26.             about: "about"
    27.         }[e] || e) + "." + {
    28.             about: "2028de0a"
    29.         }[e] + ".js"
    30.     }
    31.     function i(r) {
    32.         if(n[r]) return n[r].exports;
    33.         var t = n[r] = {
    34.             i: r,
    35.             l: !1,
    36.             exports: {}
    37.         };
    38.         return e[r].call(t.exports, t, t.exports, i), t.= !0, t.exports
    39.     }
    40.     i.= function(e) {
    41.         var r = [],
    42.             t = o[e];
    43.         if(0 !== t)
    44.             if(t) r.push(t[2]);
    45.             else {
    46.     var n = new Promise((function(r, n) {
    47.         t = o[e] = [r, n]
    48.     }));
    49.     r.push(t[2] = n);
    50.     var u, c = document.createElement("script");
    51.     c.charset = "utf-8", c.timeout = 120, i.nc && c.setAttribute("nonce", i.nc), c.src = a(e);
    52.     var l = new Error;
    53.     u = function(r) {
    54.         c.onerror = c.onload = null, clearTimeout(f);
    55.         var t = o[e];
    56.         if(0 !== t) {
    57.             if(t) {
    58.                 var n = r && ("load" === r.type ? "missing" : r.type),
    59.         u = r && r.target && r.target.src;
    60.                 l.message = "Loading chunk " + e + " failed.\n(" + n + ": " + u + ")", l.name = "ChunkLoadError", l.type = n, l.request = u, t[1](l)
    61.             }
    62.             o[e] = void 0
    63.         }
    64.     };
    65.     var f = setTimeout((function() {
    66.         u({
    67.             type: "timeout",
    68.             target: c
    69.         })
    70.     }), 12e4);
    71.     c.onerror = c.onload = u, document.head.appendChild(c)
    72.             }
    73.         return Promise.all(r)
    74.     }, i.= e, i.= n, i.= function(e, r, t) {
    75.         i.o(e, r) || Object.defineProperty(e, r, {
    76.             enumerable: !0,
    77.             get: t
    78.         })
    79.     }, i.= function(e) {
    80.         "undefined" !== typeof Symbol && Symbol.toStringTag && Object.defineProperty(e, Symbol.toStringTag, {
    81.             value: "Module"
    82.         }), Object.defineProperty(e, "__esModule", {
    83.             value: !0
    84.         })
    85.     }, i.= function(e, r) {
    86.         if(1 & r && (= i(e)), 8 & r) return e;
    87.         if(4 & r && "object" === typeof e && e && e.__esModule) return e;
    88.         var t = Object.create(null);
    89.         if(i.r(t), Object.defineProperty(t, "default", {
    90.     enumerable: !0,
    91.     value: e
    92.             }), 2 & r && "string" != typeof e)
    93.             for(var n in e) i.d(t, n, function(r) {
    94.     return e[r]
    95.             }.bind(null, n));
    96.         return t
    97.     }, i.= function(e) {
    98.         var r = e && e.__esModule ? function() {
    99.             return e["default"]
    100.         } : function() {
    101.             return e
    102.         };
    103.         return i.d(r, "a", r), r
    104.     }, i.= function(e, r) {
    105.         return Object.prototype.hasOwnProperty.call(e, r)
    106.     }, i.= "/", i.oe = function(e) {
    107.         throw console.error(e), e
    108.     };
    109.     var c = window["webpackJsonp"] = window["webpackJsonp"] || [],
    110.         l = c.push.bind(c);
    111.     c.push = r, c = c.slice();
    112.     for(var f = 0; f < c.length; f++) r(c[f]);
    113.     var p = l;
    114.     t()
    115. })([]);

    这样如果About页面发生变化,只有about.***.js和aaa.***.js发生变化,app.***.js不会发生变化。

    回到顶部
    我要评论

    所有评论

      相关文章