webpack脚手架优化

一、安全测试打包取消sourceMap

二、加快文件加载速度gzip

三、打包后个别文件很大，手动配置减小文件大小

image.png

看这个图就很明白了：

对于一份同逻辑的代码，当我们手写下一个一个的文件，它们无论是 ESM 还是 commonJS 或是 AMD，他们都是 module ；
当我们写的 module 源文件传到 webpack 进行打包时，webpack 会根据文件引用关系生成 chunk 文件，webpack 会对这个 chunk 文件进行一些操作；
webpack 处理好 chunk 文件后，最后会输出 bundle 文件，这个 bundle 文件包含了经过加载和编译的最终源文件，所以它可以直接在浏览器中运行。
一般来说一个 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.去掉代码动态加载配置

-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中动态加载的代码

最后编辑于：2020.08.19 17:51:20