一殿怜、安全測試打包取消sourceMap

二系枪、加快文件加載速度gzip

三睬澡、打包后個別文件很大固额，手動配置減小文件大小

image.png

看這個圖就很明白了：

對于一份同邏輯的代碼，當我們手寫下一個一個的文件煞聪，它們無論是 ESM 還是 commonJS 或是 AMD斗躏，他們都是 module ；
當我們寫的 module 源文件傳到 webpack 進行打包時米绕，webpack 會根據(jù)文件引用關(guān)系生成 chunk 文件瑟捣，webpack 會對這個 chunk 文件進行一些操作；
webpack 處理好 chunk 文件后栅干，最后會輸出 bundle 文件，這個 bundle 文件包含了經(jīng)過加載和編譯的最終源文件捐祠，所以它可以直接在瀏覽器中運行碱鳞。
一般來說一個 chunk 對應一個 bundle，比如上圖中的 utils.js -> chunks 1 -> utils.bundle.js踱蛀；但也有例外窿给，如下：

cacheGroups: {
            //所有入口src下公共模塊
            commonChunk: {
                name: 'commonChunk',
                filename: utils.assetsPath('js/[name].[chunkhash:8].js'),
                test (module, chunks) {
                    let res = (
                        module.resource &&
                        /\.js$/.test(module.resource) &&
                        module.resource.indexOf(path.join(__dirname, '../src')) === 0 &&
                        chunks.length >= config.build.minChunks
                    )
                    return res
                },
                chunks: 'all',
                minSize: 0,
                enforce: true,
                minChunks: 1
            },
            //所有入口node_modules下公共模塊
            commonVendor: {
                name: 'commonVendor',
                filename: utils.assetsPath('js/[name].[chunkhash:8].js'),
                test (module, chunks) {
                    let res = (
                        module.resource &&
                        /\.js$/.test(module.resource) &&
                        module.resource.indexOf(path.join(__dirname, '../node_modules')) === 0 &&
                        chunks.length >= config.build.minChunks
                    )
                    return res
                },
                chunks: 'all',
                minSize: 0,
                enforce: true,
                minChunks: 1
            }
        }

四、webpack分割代碼工具splitChunks

• webpack3.0版本沒有將chunk分割的功能率拒，項目只能被迫升級到webpack4.0崩泡，升級過程響應也加升級其他配套腳手架工具，詳情請見項目package.json猬膨。
• 升級過程中也遇到了其他問題角撞，詳情如下：
  1.更新babel配置文件
  2.去掉代碼動態(tài)加載配置

-import (/* webpackChunkName: "group-home" */ `@/pages/${path}/${view}.vue`);
+Promise.resolve(require(/* webpackChunkName: "group-home" */ `@/pages/${path}/${view}.vue`));

3.添加jsx語法支持工具（未解決）

<img :src="require(`@/assets/img/${item.icon+'@3x'}.png`)" alt="" />
//不要用這種在html中動態(tài)加載的代碼