如何优化webpack配置

优化webpack配置可以从两个角度着手，构建速度和构建物体积

一、优化构建速度

1. 安装speed-measure-webpack-plugin插件

通过speed-measure-webpack-plugin插件来分析每个loader、plugin消耗的打包时间

const SpeedMeasurePlugin = require('speed-measure-webpack-plugin')
const smp = new SpeedMeasurePlugin()

然后用smp.wrap()包裹webpack配置
注意，如果是用vue-cli构建的项目，要在vue.config.js文件中的configureWebpack用smp.wrap()包裹住webpack配置

2. 配置happyPack

在webpack构建过程中，实际上耗费的时间大多是在loader的解析转换及代码的压缩中。日常开发中我们需要用loader对css、图片、文字等文件做转换和解析的操作，并且转换的文件数据量也非常大。但是由于js天生是单线程的，不能够并发处理这些文件。
happyPack 的作用就是将这些任务分解到多个子进程中去并行处理，子进程处理完后把结果发送到主进程，从而减少总的构建时间

安装happypack npm i happypack -D
配置

const HappyPack = require('happypack')
module.exports = {
    // ....
    chainWebpack:(config)=>{
        // 配置loader
        const hRule = config.module.rule('js')
        hRule
        .test(/\.js$/)
        .include.add(resolve('src'))
        .end()
        .uses.clear().end()
        .use('happypack/loader?id=js')
        .loader('happypack/loader?id=js')
        .end()
    },
    configureWebpack:()=>{
        return {
            plugins:[
                // 添加plugin，并开启缓存
                new HappyPack({
                    id: 'js',
                    loaders: ['babel-loader?cacheDirectory=true']
                }),
            ]
        }
    }
}

通过使用happypack，构建时间由原来的23s降到了11s

3. 通过设置路径别名来缩小文件的搜索范围

4. 设置loaders的include和exclude 缩小loader编译的范围

5. extenals结合cdn

用cdn的方式来引入一些依赖，并且设置externals来让webpack在打包的时候忽略掉这些依赖。

二、优化构建物体积

1. 通过配置webpack-bundle-analyzer 来分析打包后的文件

webpack-bundle-analyzer会将打包后的内容树展示为树状图，让我们能够方便直观的看到打包后的文件内容和体积大小

const BundleAnalyzerPlugin = require('webpack-bundle-analyzer')

module.exports = {
    plugins: [
        new BundleAnalyzerPlugin({
            analyzerHost: '127.0.0.1',
            analyzerPort: 8899
        })
    ]
}

package.json中加入scripts"analyzer": "NODE_ENV=production npm_config_report=true npm run build"

2. tree-shaking 去掉项目中的无用代码

目前webpack4.x开始，就已经在mode为production时默认开启了tree-shaking，但是如果想要生效，生成的代码必须是es6模块，不能使用其他类型的模块，如commonjs
修正方法，在.babelrc文件或者webpack.config.js设置module:false
vue-cli构建的项目默认开启了tree-shaking，无需单独配置

JIA's blog