如何优化webpack

一、Webpack性能优化
          1、可以减少webpack打包时间
					2、可以减少webpack打出来包体积
			优化loader 对于 Loader 来说，影响打包效率首当其冲必属 Babel 了。因为 Babel

会将代码转为字符串生成 AST ，然后对 AST 继续进行转变最后再生成新的 代码，项目越大，转换代码越多，效率就越低。当然了，我们是有办法优化的 优化 Loader 的文件搜索范围

	    module.exports = {

module: { rules: [ { // js 文件才使用 babel test: /.js$/, loader: 'babel-loader', // 只在 src 文件夹下查找 include: [resolve('src')], // 不会去查找的路径 exclude: /node_modules/ } ] }

当然这样做还不够，我们还可以将 Babel 编译过的文件缓存起来，下次只需要编译更改 过的代码文件即可，这样可以大幅度加快打包时间 二 、HappyPack 由于受限于 Node 是单线程运行的，所以 Webpack 在打包的过程中也是单线程 的，特别是在执行 Loader 的时候，长时间编译的任务很多，这样就会导致等 待的情况。HappyPack 可以将 Loader 的同步执行转换为并行的，这样就能充分利用系 统资源来加快打包效率了 如 module: { loaders: [ { test: /.js$/, include: [resolve('src')], exclude: /node_modules/, // id 后面的内容对应下面 loader: 'happypack/loader?id=happybabel' } ] }, plugins: [ new HappyPack({ id: 'happybabel', loaders: ['babel-loader?cacheDirectory'], // 开启 4 个线程 threads: 4 }) ] 等