webpack构建打包的性能优化实战指南

第webpack构建打包的性能优化实战指南目录前言一、优化打包构建速度，提升开发体验和效率1.1优化babel-loader1.2IgnorePlugin，避免引入无用模块1.3noParse避免重复模块化解析1.4happyPack多进程打包1.5ParallelUglifyPlugin多进程压缩js1.6热更新1.7DllPlugin动态链接库插件二、webpack性能优化-产出代码总结

前言

开发的时候，如果每次我们修改了文件，webpack都能很迅速地帮我们编译完构建完而且浏览器能保存状态更新内容，体验会比较好；优化产出代码，减小体积，设置hash，可以提升生产环境上网页的加载速度

一、优化打包构建速度，提升开发体验和效率

1.1优化babel-loader

开启缓存，只要是es6代码没有改动的部分，下次重新构建的时候可以使用缓存，不被重新编译。

rules:[

test:/\.js$/,

loader:['babel-loadercacheDirectory'],

include:srcPath,//设置include或者exclude的范围，限定需要编译文件的目录范围

//exclude:/node_modules/

]

1.2IgnorePlugin，避免引入无用模块

比如有些库包含多个国家的语言包（moment.js），我们只需要中文包或者英文报,所以我们需要避免引入不需要的语言包，

plugins：[

//忽略moment下的/locale目录，再手动importlocale内部我们需要使用到的语言包

newwebpack.IgnorePlugin(/\.\/local/,/moment/)

]

1.3noParse避免重复模块化解析

代码中如果有xx.min.js之类的文件，基本已经采用模块化处理过的，无需在对类似文件进行递归解析处理，会引入进项目

module:{

noParse:[/xx\.min\.js$/]

}

1.4happyPack多进程打包

开启多进程打包，提高构建速度

rules:[

test:/\.js$/,

//把对.js文件的处理转交给id为babel的HappyPack实例

use:['happypack/loaderid=babel'],

include:srcPath

plugins:[

newHappyPack({

//用唯一的标识符id来代表当前的HappyPack是用来处理一类特定的文件

id:'babel',

//如何处理.js文件，用法和loader配置中一样

loaders:['babel-loadercacheDirectory']

]

1.5ParallelUglifyPlugin多进程压缩js

在生产环境中使用，因为在开发环境下没有必要压缩js代码

plugins:[

newParallelUglifyPlugin({

//还是使用的UglifyJs压缩，只不过帮助开启了多进程

uglifyJS:{

output:{

beautify:false,//最紧凑的输出

comments:false,//删除所有的注释

compress:{

//删除所有的'console'语句，可以兼容ie浏览器

drop_console:true,

//内嵌定义了但只用到一次的变量

collapse_vars:true,

//提取出出现多次但是没定义成变量去引用的静态值

reduce_vars:true

]

1.6热更新

改完代码，浏览器无需刷新，新代码生效，状态保留。

entry:{

index:[

'webpack-dev-server/clienthttp://localhost:8080/',

'webpack/hot/dev-server',

path.join(srcPath,'index.js')

other:path.join(srcPath,'other.js')

plugins:[

newHotModuleReplacementPlugin()

devServer:{

xxx:'xx'

hot:true//开启热更新

}

配置完后，修改样式，热更新生效了，但修改js,热更新没有生效，接下来还需要在js中设置允许热更新监听的模块

if(module.hot){

module.hot.accept(['xxx文件名'],()={

//在注册了热更新的js文件修改后，才会进行热更新

}

1.7DllPlugin动态链接库插件

前端框架如Vue、React,体积大，构建慢，比较稳定，不常升级版本。这种情况下，同一个版本只构建一次，不用每次都重新构建；由于webpack已内置DllPlugin，所以不需我们额外安装插件，包含两个插件DllPlugin(用来打包出dll文件，只要打包过，就不需要再打包了),DllReferencePlugin（使用dll文件）

//webpack.dll.js文件中的配置

mode:'development',

entry:{

//把react相关模块放到一个单独的动态链接库

react:['react','react-dom']

output:{

//输出动态链接库的文件名称，[name]代表当前动态链接库的名称

filename:'[name].dll.js',

path:distPath,

//存放动态链接库的全局变量名称，例如对应react来说就是_dll_react

//之所以在前面加上_dll_是为了防止全局变量冲突

library:'_dll_[name]'

plugins:[

newDllPlugin({

//动态链接库的全局变量名称，需要和output.library中保持一致

//该字段的值也就是输出的manifest.json文件中name字段的值

name:'_dll_[name]',

path:path.join(distPath,'[name].manifest.json')

]

配置好webpack.dll.js后，在package.json文件中定义执行webpack.dll.js的命令

"script":{

"dll":"webpack--configbuild/webpack.dll.js"

}

以上配置完执行dll打包命令打包后会产出react.dll.js和react.manifest.json文件，需要在项目中使用到打包后的react.dll.js

//在inde.html中

scriptsrc="./react.dll.js"/script

//在webpack.dev.js中

plugins:[

newDllReferencePlugin({

//描述react动态链接库的文件内容

manifest:require(path.join(distPath,'react.manifest.json'))

]

二、webpack性能优化-产出代码

可以从体积更小；合理分包，不重复加载；速度更快、内存使用更少这几方面去进行优化

2.1小图片base64编码，使用url-loader，可减少网络请求2.2bundle加hash,如果文件没有变，hash值不变，浏览器可以命中缓存2.3提取公共代码，可以是整个项目的体积更小2.4IngorePlugin忽略库中不需要的包2.5使用cdn加速

output:{

publicPath:''//引用文件路径是，路径名前加cdn域名的前缀

}

打包后，将代码放入cdn域名对应的服务器中。

2.6使用production

mode为production时，打包后的代码会自动压缩，Vue/React会自动删掉调式代码（如开发环境的warning）,也会自动启用Tree-Shaking,将未使用到的代码删掉

mode:"production"

2.7ScopeHosting

将多个函数合并到一个函数