vite(or rollup) 實現 webpackChunkName

插件NPM地址vite-plugin-webpackchunkname

vite 生產環境打包的問題

第一次打包：

dist/static/js/index-061c90a0.js                60.19 KiB / gzip: 25.74 KiB
dist/static/js/autoplay-0b4333d9.js             86.67 KiB / gzip: 24.32 KiB
dist/static/js/index-f329ab5b.js                42.88 KiB / gzip: 24.61 KiB
dist/static/js/no-result-4bfdf110.js            77.73 KiB / gzip: 25.06 KiB
dist/static/js/index-d7d7449c.js                30.82 KiB / gzip: 17.62 KiB
dist/static/js/index-5595aadc.js                32.66 KiB / gzip: 19.51 KiB
dist/static/js/index-b048ae54.js                30.39 KiB / gzip: 17.95 KiB
dist/static/js/index-a381f6bc.js                30.64 KiB / gzip: 18.09 KiB
dist/static/js/index-1a717d8f.js                36.13 KiB / gzip: 18.65 KiB
dist/static/js/index-16cb64df.js                29.26 KiB / gzip: 16.63 KiB
dist/static/css/vendor-8fff92cd.css             87.97 KiB / gzip: 34.43 KiB
dist/static/js/index-8a44bcc2.js                255.44 KiB / gzip: 55.96 KiB
dist/static/js/index-03bfa727.js                255.70 KiB / gzip: 55.93 KiB
dist/static/js/index-f8e54549.js                255.42 KiB / gzip: 55.86 KiB
dist/static/js/index-c33e7823.js                251.83 KiB / gzip: 69.88 KiB
dist/static/js/vendor-7516d06f.js               299.96 KiB / gzip: 108.29 KiB

---

更改src\projects\promotion\pages\2021nationalday\pages\result\index.vue中的一個字：

---

重新打包：

dist/static/js/index-47166712.js                60.19 KiB / gzip: 25.74 KiB
dist/static/js/autoplay-0b4333d9.js             86.67 KiB / gzip: 24.32 KiB
dist/static/js/index-079de27a.js                42.88 KiB / gzip: 24.61 KiB
dist/static/js/no-result-8bf53e78.js            77.73 KiB / gzip: 25.06 KiB
dist/static/js/index-bdf2dbec.js                30.82 KiB / gzip: 17.62 KiB
dist/static/js/index-74751d04.js                32.66 KiB / gzip: 19.51 KiB
dist/static/js/index-06423a3b.js                30.39 KiB / gzip: 17.95 KiB
dist/static/js/index-1bc8f760.js                30.64 KiB / gzip: 18.09 KiB
dist/static/js/index-dfefbfa9.js                29.26 KiB / gzip: 16.63 KiB
dist/static/js/index-a138748d.js                36.13 KiB / gzip: 18.65 KiB
dist/static/css/vendor-8fff92cd.css             87.97 KiB / gzip: 34.43 KiB
dist/static/js/index-24dbfab5.js                255.44 KiB / gzip: 55.96 KiB
dist/static/js/index-b675aac7.js                255.70 KiB / gzip: 55.93 KiB
dist/static/js/index-196e276b.js                255.42 KiB / gzip: 55.86 KiB
dist/static/js/index-28cfd5ca.js                251.83 KiB / gzip: 69.88 KiB
dist/static/js/vendor-7516d06f.js               299.96 KiB / gzip: 108.29 KiB

---

我的疑問

1. 配置的 webpackChunkName 未生效
2. 項目中沒有直接引用 autoplay.js, 為啥出現在打包文件中
3. 增加了一個字，為啥 vendor.js 的 hash 相同，但其他 hash 都發生了變化
4. 生成的 .js 文件數量為啥遠遠大於頁面數量

---

vite 默認打包邏輯

const rollupOptions = {
  output: {
    ...
    manualChunks: createMoveToVendorChunkFn()
  }
}
const bundle = await rollup.rollup(rollupOptions);

function createMoveToVendorChunkFn(config) {
    const cache = new Map();
    return (id, { getModuleInfo }) => {
        if (id.includes('node_modules') &&
            !isCSSRequest(id) &&
            staticImportedByEntry(id, getModuleInfo, cache)) {
            return 'vendor';
        }
    };
}

---

rollup

---

module chunk and bundle

module

模塊，代指用戶工作目錄下的一個個文件，譬如 a.js, b.json

chunk

module 的集合

bundle

一個 chunk 根據用戶的配置，最終生成用戶可見的js文件

---

manualChunks

Allows the creation of custom shared common chunks.

---

我們想要

• 根據路由配置的 webpackChunkName 生成包名
• 減少碎片化的 js 文件
• 文件緩存時間盡可能長久

---

我們的打包流程

1. 為符合條件的模塊打上 webpackChunkName 標識
2. 根據模塊標識生成 bundle

---

打 webpackChunkName 標識

import(/* webpackChunkName: "detail" */ "@/detail/somepage.vue")

import("@/detail/somepage.vue?chunkName=detail")

---

生成 bundle

• 從入口文件引入的三方包，打包成 vendor
• 路由帶有 webpackChunkName 的，分別按名稱打包
• 文件多次引用
  • 被同一個project引用，打包成 [projectName]-share
  • 被多個 project 引用，打包成 MAIN
• src 文件夾下的內容打包成 MAIN

---

more

生產打包，能不能更快？