webpack性能优化

webpack

及时更新版本（node，npm等），新版本一般都会有提高打包效率的新特性。
在尽可能少的模块上应用loader。可以优化文件搜索范围（即在rule中写include或exclude），eg. 可以不用编译node_modules中的代码，因为里面的都是被打包编译过的。
plugin尽可能精简并确保可靠，也尽可能少用。eg.我在prod环境下用到了OptimizeCSSAssetsPlugin这个插件，用于css代码的压缩，可以保证用户加载的文件尽可能的小。但是如果是在dev环境下，就不需要这个plugin，可以不用考虑用户加载速度的问题，这样的话可以提高dev环境下的打包时间。

resolve参数合理配置

import或require的时候可以不用写文件名后缀，而在resolve中写resolve.extensions，并尽可能减少后缀列表长度，将出现频率高的后缀排在前面。
resolve.alias：设置别名的方式映射一个路径，让webpack更快找到路径。

resolve: {
    extensions: ['.js', '.jsx'], //先找有没有后缀为.js的文件，没有的话再找后缀为.jsx的文件。
    mainFiles: ['index', 'child'], //先找路径下有没有文件名为index的文件，再找文件名为child的文件。
    alias: {
        child: path.resolve(__dirname, 'src/child/child'), //取别名，页面上可以直接引入import child from 'child'引用
    }
}

使用DllPlugin提高打包速度(通过把一些库文件存起来，不让它每一次都重新打包)。这种方式可以极大的减少打包类库的次数。主要当类库更新版本才有需要重新打包。

DllPlugin与DllReferencePlugin可以用来预构建vendor包，这样只要一次预构建后没有额外的依赖变更，那么启动开发环境的速度就会显著提升。实际上DllPlugin是只用于开发环境的。

1. 配置webpack.dll.js文件，对第三方模块单独进行打包，生成打包结果。
const path = require('path')
const webpack = require('webpack')

module.exports = {
    mode: 'production',
    entry: {  //需要进行打包的第三方模块代码
        vendors: ['lodash'],
        react: ['react-dom', 'react']
    },
    output: {
        filename: '[name].dll.js',
        path: path.resolve(__dirname, './dll'),
        library: '[name]' //通过全局变量暴露出去
    },
    plugins: [
        new webpack.DllPlugin({ //生成映射文件
            name: '[name]',
            path: path.resolve(__dirname, './dll/[name].manifest.json')
        })
    ]
}
2. 把生成的文件引入到html中，并引入分析映射文件。webpack.common.js文件下
plugins: [
    new HtmlWebpackPlugin({
        // title: 'webpack-study',
        template: './index.html',
    }),
    new CleanWebpackPlugin(),
    new webpack.HotModuleReplacementPlugin(),
    new AddAssetHtmlWebpackPlugin({ //把生成的dll文件挂载到html文件中
        filepath: path.resolve(__dirname, './dll/vendors.dll.js')
    }),
    new addAssetHtmlWebpackPlugin({ //把生成的dll文件挂载到html文件中
        filepath: path.resolve(__dirname, './dll/react.dll.js')
    }),
    new webpack.DllReferencePlugin({ //分析引入映射文件
        manifest: path.resolve(__dirname, './dll/vendors.manifest.json')
    }),
    new webpack.DllReferencePlugin({ //分析引入映射文件
        manifest: path.resolve(__dirname, './dll/react.manifest.json')
    })
]

控制包文件的大小

TreeShaking：可以删除项目中未被引用的代码
懒加载：实现按需加载，多写异步代码，提高页面的代码使用率
thread-loader和happypack可以可以利用node中的多进程，同时利用多个CPO对项目打包；对多页面应用，使用parallel-webpack可以实现对多个页面一起打包。因为Node是单线程运行的，所以Webpack在打包的过程中也是单线程的，特别是在执行Loader的时候，这样会导致等待的情况。HappyPack可以将Loader的同步执行转换为并行的
合理使用sourceMap:用对devtool配置，在开发模式建议用cheap-module-eval-source-map；在生产模式建议用cheap-module-source-map
结合stats分析打包结果
开发环境内存编译。开发环境我们用的webpackDevServer，打包的时候不会生成dist目录，而是将编译生成的文件放到内存中，内存的读取肯定要比硬盘的读取快的多，从而提高开发环境下webpack打包的性能。
开发环境无用插件剔除。eg. 开发环境下，我们不需要对代码进行压缩，所以要将mode设置为development而不是production，压缩很降低webpack的性能，只有在生产环境下才需要压缩，提高用户的体验。