06.webpack性能优化--构建速度

• 优化babel-loader
• happyPack
• IgnorePlugin
• paralleUglifyPlugin
• noParse
• 自动刷新

1 happypack多进程打包

• js单线程，开启多进程打包
• 提高构建速度（特别是多核CPU）

const HappyPack = require('happypack')module.exports = smart(webpackCommonConf, {mode: 'production',output: {// filename: 'bundle.[contentHash:8].js',  // 打包代码时，加上 hash 戳filename: '[name].[contentHash:8].js', // name 即多入口时 entry 的 keypath: distPath,// publicPath: 'http://cdn.abc.com'  // 修改所有静态文件 url 的前缀（如 cdn 域名），这里暂时用不到},module: {rules: [// js{test: /\.js$/,// 把对 .js 文件的处理转交给 id 为 babel 的 HappyPack 实例use: ['happypack/loader?id=babel'],include: srcPath,// exclude: /node_modules/},]},plugins:[// happyPack 开启多进程打包new HappyPack({// 用唯一的标识符 id 来代表当前的 HappyPack 是用来处理一类特定的文件id: 'babel',// 如何处理 .js 文件，用法和 Loader 配置中一样loaders: ['babel-loader?cacheDirectory']}),] })

关于开启多进程

• 项目较大，打包较慢，开启多进程能提高速度
• 项目较小，打包较快，开启多进程会降低速度（进程开销）
• 按需使用

2. IgnorePlugin

• 这是webpck的内置组件
• 这个插件的作用是：忽略第三方包指定目录，让这些指定目录不要被打包进去
• 例子：比如我们要使用moment这个第三方依赖库，该库主要是对时间进行格式化，并且支持多个国家语言

moment包打包的问题

import moment from 'moment'
//设置语言
moment.locale('zh-cn');
let r = moment().endOf('day').fromNow();
console.log(r);

这样打印出来的就是中文的时间，因为我在使用这个API的时候，前面设置了语言类型moment.locale为中文zh-cn。但是，虽然我设置了语言为中文，但是在打包的时候，是会将所有语言都打包进去的。这样就导致包很大，打包速度又慢所以，最好能够少打包一些没用的依赖目录进去而moment的包含’./locale/‘该字段路径的文件目录就是各国语言的目录，比如’./locale/zh-cn’就是中文语言

plugins:[//moment这个库中，如果引用了./locale/目录的内容，就忽略掉，不会打包进去new Webpack.IgnorePlugin(/\.\/locale/,/moment/),
]

问题存在并解决

我们虽然按照上面的方法忽略了包含’./locale/'该字段路径的文件目录,但是也使得我们使用的时候不能显示中文语言了，所以这个时候可以手动引入中文语言的目录

import moment from 'moment'//设置语言//手动引入所需要的语言包
import 'moment/locale/zh-cn';moment.locale('zh-cn');let r = moment().endOf('day').fromNow();

3. ParallelUglifyPlugin

webpack默认提供了UglifyJS插件来压缩JS代码，但是它使用的是单线程压缩代码，也就是说多个js文件需要被压缩，它需要一个个文件进行压缩。所以说在正式环境打包压缩代码速度非常慢(因为压缩JS代码需要先把代码解析成用Object抽象表示的AST语法树，再去应用各种规则分析和处理AST，导致这个过程耗时非常大)。使用UglifyJS压缩代码如下：

module.exports = {plugins: [new webpack.optimize.UglifyJsPlugin({sourceMap: true,compress: {warnings: false}}),]
}

当webpack有多个JS文件需要输出和压缩时候，原来会使用UglifyJS去一个个压缩并且输出，但是ParallelUglifyPlugin插件则会开启多个子进程，把对多个文件压缩的工作分别给多个子进程去完成，但是每个子进程还是通过UglifyJS去压缩代码。无非就是变成了并行处理该压缩了，并行处理多个子任务，效率会更加的提高

4. noParse

这是module中的一个属性，
作用：不去解析属性值代表的库的依赖

1. 我们一般引用jquery，可以如下引用

import jq from 'jquery'

2. 对于上面的解析规则：当解析jq的时候，会去解析jq这个库是否有依赖其他的包
3. 我们对类似jq这类依赖库，一般会认为不会引用其他的包(特殊除外,自行判断)。所以，对于这类不引用其他的包的库，我们在打包的时候就没有必要去解析，这样能够增加打包速率。
4. 所以，可以在webpack的配置中增加noParse属性（以下代码只需要看module的noParse属性）

let path = require('path');
let HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {mode:'development',entry:'./src/index.js',output:{filename:'bundle.js',path:path.resolve(__dirname,'dist')},module:{noParse:/jquery/,//不去解析jquery中的依赖库},}