webpack系列之优化策略
1、打包速度优化
1.1、速度监控插件—speedMeasureWebpackPlugin
speed-measure-webpack-plugin是一款能检测Loader和Plugin耗时的插件，具体的用法就不再阐述了，可以去https://www.npmjs.com/package/speed-measure-webpack-plugin这看看
1.2、减小webpack搜索文件范围
1.2.1、Loader中的配置
我们通常使用Loader去加载webpack不能识别的文件，例如.css .vue文件等，但是这个加载过程是一个挺耗时的过程。
因此，在loader的配置中我们可以通过设置：
- include：指定Loader去解析某个文件
{
test: /.js$/, //ES6的babel
include:path.resolve('src'), //只加载src下的.js文件
use: 'babel-loader',
},
- exclude：不去加载某些文件，例如node_modules下的文件等
{
test: /.js$/, //ES6的babel
include:path.resolve('src'), //只加载src下的.js文件
use: 'babel-loader',
exclude:/node_modules/ //解析时忽略node——modules
},
1.2.2、resolve中的配置
webpack的寻找模块的文件机制一般是由内置的JavaScript解析器决定的
- 当引入一个绝对路径：则直接去这个路径下去解析该模块
import "D:\vueProject\webpack\commons"
- 当引入一个相对路径时：根据当前文件所在的路径，拼接成绝对路径去解析
import "./src/commons"
- 当直接引入一个模块时（这种模块一般叫做第三方模块）：webpack会去当前目录下的node_modules下去寻找，如果找不到则再往上去查找，层层向上。这跟Node的找模块机制很像，
import "vue"
（具体的模块解析请看这里https://webpack.docschina.org/concepts/module-resolution）
你可以通过resolve去修改默认的查找规则，我们可以优化resolve的配置，达到减小webpack搜索文件范围的目的。
具体策略为：
- alias—指定某个模块的搜索路径，是一个对象：“模块名”:“对应模块的路径”，对于整体性非常强的模块，我们可以这么去设置
resolve:{
//利用resolve模块减少文件查找
alias:{
'vue':path.resolve(__dirname,'./node_modules/vue/dist/vue.min.js'), //对于像常用的模块，我们可以定义在alias中，直接去该路径下查找该模块，减少查找模块的时间
},
}
- modules—规定webpack寻找模块应该寻找的文件，路径有两种，绝对和相对，建议用相对路径，因为绝对路径只会在规定的文件查找，当查找不到就会失败。我们一般传入一个数组有多个路径，modules[0]要优先于modules[1]，先去modules[0]查找，查找不到再去modules[1]查找。
resolve:{
//利用resolve模块减少文件查找
modules:["path.resolve(__dirname, 'src')","node_modules"]
}
- mainFields----在pachage中查找对应字段，根据对应字段，直接读取此模块的代码。第三方模块针对，环境的不同，入口文件也不同的，webpack默认的resolve.mainFields : [’browser’, ’main ’ ]
使用本方法优化时，需要考虑到所有运行时依赖的第三方模块的入口文件的描述字段， 就算只有一个模块出错，也可能会造成构建出的代码无法正常运行。-----《深入浅出Webpack》
resolve:{
//利用resolve模块减少文件查找
mainFields:['main'] //查找package.json中的main字段 根据main字段就可以直接找到入口了，因为大多数第三方模块都是main为入口文件
}
- extensions----webpack将去优先解析对应后缀的文件，默认值为： [ .js,.json ]，将确定的后缀写出，最常用的后缀放前面，减少搜索时间，对于确定的模块，直接写出对应后缀
resolve:{
//利用resolve模块减少文件查找
extensions:['.js','.json'], //先查找.js后缀的文件，再去查找.json后缀的文件
}
假设有一个模块 import “./data” —当我们设置了上面的extensions规则之后，先去对应文件夹查找data.js，找不到再去查找data.json。
假设我们已经直到data就是一个js文件，那么，我们该直接补全后缀。
import "./data.js"
1.2.2、module.noParse配置
module.noParse可以帮我忽略掉那些没有采用模块化的模块，因为像一些工具库，Jquery等没有采用模块化，让webpack去解析这个模块，很是浪费时间
module:{
noParse:[/jquery\.min\.js$/], //不去解析jquery 没用且浪费时间
}
1.3、提升第二次打包的时间
1.3.1、利用缓存
在webpack系列项目中，如果开启了缓存，那么就会在node_modules下生成一个.cache文件夹
- 对于第一次打包没有效果
- 一旦开启了缓存，除了第一次打包之后的速度会特别快
1.3.1.1、babel-loader
babel-loader常用于解析.js文件，将高版本的JS语法，例如ES6转换成低版本的语法。我们可以针对babel-loader去进行缓存的操作，使得打包速度加快
{
//之前提到的针对Loader的匹配规则去优化打包速度
test: /.js$/, //ES6的babel
include:path.resolve('src'), //只加载src下的.js文件
use: [{
loader:'babel-loader',
options:{
cacheDirectory:true //开启缓存，将在node_modules/.cache生成对应的缓存文件
}
}],
exclude:/node_modules/ //解析时忽略node——modules
},
1.3.1.2、terser-webpack-plugin
webpack4中推荐使用ter-webpack-plugin进行缓存，在webpack4中有一个配置optimization，它会根据mode不同去进行一个代码的压缩优化，我们可以通过传入一个new TerSerPlugin(…)去覆盖webpack默认的压缩工具
optimization: {
minimizer: [
new TerserPlugin({
cache:true, //开启缓存
}),
],
1.3.1.3、cache-loader
cached-loader可以帮助性能开销较大的Loader，将结果缓存到磁盘中，请将cache-loader，放在别的Loader之后执行
但是如果是性能开销小的Loader去使用的话，那么就会变得更慢了
请注意，保存和读取这些缓存文件会有一些时间开销，所以请只对性能开销较大的 loader 使用此 loader。–webpack官网
{
test: /.js$/, //ES6的babel
include:path.resolve('src'), //只加载src下的.js文件
//loader执行顺序从右到左
use: ['cache-loader','babel-loader']
}],
exclude:/node_modules/ //解析时忽略node——modules
},
1.3.1.4、资源分包—DLL
这是一个经常用到的缓存策略，单独配置一个webpack配置，将公共资源打包出来，等我们正式打包发布的时候，直接引用就好了，如此一来经过我们预编译打包的模块就不需要经过webpack打包
- 新建一个webpack.dll.js作为我们进行资源分包的webpack配置，以打包vue模块为例：
const path=require('path');
const webpack=require('webpack')
module.exports={
entry:{
library:[ //要分离的包
'vue' //这里我只打包了vue 其实也可以将我们业务中常用到的工具包打包
]
},
output:{
filename:'[name]_[hash:6].dll.js', //文件指纹 方便检测文件有没有被修改过
path:path.join(__dirname,"commons/library"), //生成的文件路径
library:'[name]' //分离包暴露模块的名字
},
plugins:[
new webpack.DllPlugin({
//分包
name:'[name]', //文件名
path:path.join(__dirname,"commons/library/[name].json"), //生成的json 供DllReferencePlugin使用
})
]
}
经过上面的打包，在comms/library/下生成一个library_[hash:6].dll.js和library.json文件
下一步我们将根据这个library.json文件，直接找到我们预编译好的包
- 正式打包发布的webpack中的配置：webpack.pro.js
module.exports={
plugins:[
new webpack.DllReferencePlugin({
manifest:require('./commons/library/library_[has:6].json') //引入经由DLLPlugin生成的json文件 同样的带上了文件指纹
}),
]
}
1.4、HappyPack
webpack时运行在Node环境中的，JS是单线程的，任务是一个接着一个的处理，有什么办法能让webpack在同个时间段，执行多个任务呢？答案就是使用HappyPack。
- 对于Loader这些需要大量读写操作的，在需要解析的loader前面添加一个happypack/loader?id=xxx，id为此loader的唯一标识
- 在new HappyPack({…})传入配置，去配置一个happyloader，id为loader中的id，代表的是一个实例化的happyPack-loader
modules.rules={
test: /.js$/,
include:path.resolve('src'), //只加载src下的.js文件
use:[’happypack/loader?id=babel ’],
exclude:/node_modules/ //解析时忽略node——modules
},
plugins:[
new HappyPack ( {
／／用唯一的标识符 id，来代表当前的 HappyPack 是用来处理一类特定的文件的
id: ’ babel ’, ／／ 如何处理. j s 文件，用法和 Loader 配置中的一样
loaders: [ ’ babel-loader?cacheDirectory’] , ／／． ．． 其他配置项 }) ,
]
原理：因为loader是对文件的读写操作，特别耗时，HappyPack的原理就是将这些操作分解到多个进程去并行处理，缩短总的构建时间
2、打包体积优化
打包体积关系到我们一个项目性能的好坏，首屏优化，资源压缩等。
2.1、打包体积分析插件
常用的打包体积分析插件就是：webpack-bundle-analyzer，具体用法就不说了，可以去这看：https://www.npmjs.com/package/webpack-bundle-analyzer
2.2、文件压缩
将代码压缩，资源压缩，项目的体积更小，速度更快。
我们都知道，在webpack中，使用Loader去解析除了 .js 和 .json 之外的文件，其实这些文件也提供了很多的压缩选项，也有很多的plugin能帮我们压缩各种资源。
2.2.1、CSS压缩
使用optimize-css-assets-webpack-plugin结合cssnano压缩css代码
- optimize-css-assets-webpack-plugin是一款压缩css文件的插件，npm地址：https://www.npmjs.com/package/optimize-css-assets-webpack-plugin
- cssnano—一款压缩css的工具
plugins:[
new OptimizeCSSAssetsPlugin({
assetNameRegExp:/\.css$/g, //要解析的css文件匹配规则，尽可能的精准 避免webpack不必要的工作
cssProcessor:require('cssnano') //使用cssnano工具进行css压缩
}),
]
加粗样式
2.2.2、js压缩
如果是webpack4.x以上的版本的话，那么mode="production"是会自动开启uglifyPlugin的
使用uglifyPlugin进行JS文件的压缩，
2.2.4、图像压缩
图像压缩的plugin和loader很多，这里只提一个常用的url-loader：https://www.webpackjs.com/loaders/url-loader
- options.limit-----小于这个配置的文件将转换成base64嵌入html页面中
{
test:/\.(png|jpg|jpeg)$/,
use:[
{
loader: 'url-loader',
options:{
name:'[name]_[hash:6].[ext]',
limit:10*1024, //小于10*1024字节即10kb时，就将图片转换成base64嵌入html中
},
},
}
3、关闭source-map
mode="production"时，默认关闭source-map
4、代码分割
4.1、提取公共模块—splitChunksPlugin
有这么一个需求，当A页面引用了C模块，B页面也引用了C模块，那么对于这个C模块，我们就可以叫做公共模块，webpack会重复打包C模块，那么我们就可以使用SplitChunksPlugin去将C模块打包出来，避免重复打包的情况
相关配置：https://webpack.docschina.org/plugins/split-chunks-plugin/#src/components/Sidebar/Sidebar.jsx
splitChunks: {
chunks:"all", //打包模块的类型：同步模块(initial)，异步模块(async) all为所有模块
//同步模块---一般就是直接执行文件，例如入口文件等
//异步模块---import("vue")等
minSize: 0, //引用的块的大小，直接大于这个就直接打包，设置为0为怎么样都打包
cacheGroups: {
//打包的模块
commons: {
//打包的commons模块
name: 'commons', //commons模块的name
minChunks: 2 //引用次数为2 采取实现打包 例如A模块引用C模块，B模块也引用C模块，那么对于C模块来说就是引用了两次
}
}
},
要注意，如果是webpack4.0以下的版本，提取公共代码用CommonsChunkPlugin
4.2、优化引入模块
4.2.1、CDN引入：html-webpack-externals-plugins+html-webpack-plugin
在打包生产环境时，我们可以将一些比较大的模块，例如Vue、React等采取CDN引入的方式，如此一来就能缩小我们的项目大小了。
html-webpack-externals-plugins—将某个模块，替换成CDN资源：https://www.npmjs.com/package/html-webpack-externals-plugin
webpack.pro.js
new HtmlWebpackExternalsPlugin({
externals:[
{
module:'Vue', //打包模块名称
entry:'//cdn.bootcss.com/vue/2.6.11/vue.common.dev.js', //输出CDN资源
global:'Vue' //全局名称
}
]
})
index.html-----使用EJS语法引入
<!DOCTYPE html>
<html lang="en">
<head>
<title>webpack</title>
<script type="text/script" src='https//cdn.bootcss.com/vue/2.6.11/vue.common.dev.js'></script>
</head>
<body>
<div id='search'>
<p>search页</p>
</div>
</body>
</html>
4.2.2、页面公用的资源
比如我们正在写一个多页面应用，此时我们index.html页面需要一大串的meta，search.html也需要同样的meta，那么我们就可以使用html-webpack-plugin中的EJS语法+raw-loader，直接引入一个meta.html。
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<%= require('raw-loader!./meat.html') %>
<title>webpack</title>
</head>
<body>
<div id='search'>
<p>search页</p>
</div>
</body>
</html>
meta.html
<meta charset="UTF-8">
<meta name="viewport" content="viewport-fit=cover,width=device-width,initial-scale=1,user-scalable=no">
<meta name="format-detection" content="telephone=no">
<meta name="keywords" content="now,now直播,直播,腾讯直播,QQ直播,美女直播,附近直播,才艺直播,小视频,个人直播,美女视频,在线直播,手机直播">
<meta name="name" itemprop="name" content="NOW直播—腾讯旗下全民视频社交直播平台">
<meta name="description" itemprop="description"
content="NOW直播，腾讯旗下全民高清视频直播平台，汇集中外大咖，最in网红，草根偶像，明星艺人，校花，小鲜肉，逗逼段子手，各类美食、音乐、旅游、时尚、健身达人与你24小时不间断互动直播，各种奇葩刺激的直播玩法，让你跃跃欲试，你会发现，原来人人都可以当主播赚钱！">
<meta name="image" itemprop="image"
content="https://pub.idqqimg.com/pc/misc/files/20170831/60b60446e34b40b98fa26afcc62a5f74.jpg">
<meta name="baidu-site-verification" content="G4ovcyX25V">
<meta name="apple-mobile-web-app-capable" content="no">
<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
5、文件内联—减少请求数，加快首屏时间
- CSS内联-----style-loader，将.css文件内联到html中减少css请求
- 图片内联-----url-loader，通过设定options.limit来规定大小为多少的图片将被采用Base64编码内嵌到html页面中
- JS内联----使用raw-loader+html-webpack-plugin的EJS语法
5、摇树优化—Tree shaking
5.1、定义
将用到的方法，模块打包，不用到的方法或者模块就不打包
5.2、原理
根据DCE的规则去执行，当满足DCE的代码或者模块就不去打包。
在ES6的模块机制下才有效，因为ES6的模块机制是静态的不是动态的，DCE匹配的代码会在uglify阶段被擦除，不会被打包。
DCE规则
4. 代码不被执行，不会被到达的
5. 代码执行结果不会被用到的
6. 代码只写不读的
5.3、用法
JS–Tree shaking
在webpack4.x以上的版本中，当mode==“pdoduction”，默认开启，即生产模式自动开启，若想在开发环境开启，那么就需要.babelrc里设置modules:false即可
CSS–Tree shaking
- Purgecss： 原理—遍历CSS代码、识别已经用到的CSS class，搭配mini-css-extract-plugin（此plugin能将css文件打包成单独的.css文件）使用
2.uncss 原理–通过jsdom加载html， 样式通过PostCSS解析，通过document.querySelector识别用不到的CSS器
6、scope hoisting
6.1、定义
webpack打包会生成各种闭包，导致内存泄漏，运行开销增大，体积增大，所以我们要使用scope hoisting 来重新构建webpack。
6.2、原理
将模块代码按照引用顺序放在一个函数作用域中，然后适当命名解决冲突
6.3、使用
- webpack4.0 在mode="production"默认开启
- new ModuleConcatenationPlugin()也可开启
module.exports = {
resolve: {
／／针对 Npm 中的第二方模块优先采用 j snext :main 中指向的 ES6 模块化语法的文件
mainFields: [’ j snext :main ’,’browser’,’main ’]
plugins: [
new ModuleConcatenationPlugin( ), ]／／开启 Scope Hoisting
}
6.4、作用
- 减少函数声明
- 减小内存开销
7、提取公共代码
7.1、为什么需要提取公共代码
大型网站，不单单只是单页面，其实每一个页面都是一个单页面，如果这些单页面之间采用了相同的技术栈和相同的代码，相同的样式，那么代码重复率就特别高，这会产生以下问题
-
相同代码重复被执行，影响效率，浪费用户流量和服务器成本
-
页面加载资源大，首屏时间慢
那么将页面之间共有的代码抽离成公共代码就尤为重要，这么做的好处有： -
加快访问时间，例如当刚进入页面就开始加载公共代码，设置缓存，那么再去访问网站的另一个页面，就不需要再去请求公共代码，直接从缓存中获取
-
减少服务器压力，减少用户流量和带宽，因为第一次进入时，已经缓存了公共代码，那么，访问该网站别的页面时，就不需要去请求公共代码
当确定一个网站需要的技术栈之后，我们可以将公共代码分成：
7.2、公共库
这个库是存放一些业务模块的代码，例如utils模块的代码等，这个库主要的特点是，内容经常更新，commos.js
7.3、基础库
这个库是存放一些项目必须的依赖模块，例如：当一个网站是以vue框架开发的，一个大型网站不单单只是一个单页面应用，很可能有多个入口，但是这些应用的特点就是，共同使用vue开发，那么vue就是这个项目的基础库，这个库的特点就是内容不经常更新，是多页页面共同用到的模块。base.js
7.4、为文件添加文件指纹
文件指纹
为每一个经由webpack打包生成的文件的文件名，添加一个hash值，标识当前唯一的文件，一般而言是：[name]_[hash:8].js
作用
结合我们需要提取公共代码，其实就是为了让我们知道，该文件是否被更新过，如果被更新过，那么我们就需要去替换掉缓存中的公共代码，若没有，那么我们就不需要去更新缓存中的公共代码。
7.5、使用splitChunksPlugin进行分包
https://webpack.docschina.org/plugins/split-chunks-plugin/#src/components/Sidebar/Sidebar.jsx具体的配置参照官网，这里只介绍一下基本的参数：
- chunks：需要打包块的类型，有all—打包全部，async—打包异步模块，initial—打包同步模块
- minSize—需要打包模块的大小
- cacheGroups----打包公共文件，webpack根据这里面的配置，决定要打包成几个.js文件。根据我们之前的讨论，应该打包成一个基础库base.js，还应该打包一个公共库，commons.js，那么这里就应该有两个对象，一个是base，一个是commons。
- cacheGroups.test—打包该公共库的匹配规则，按照我们之前讨论的，base为基础库，打包的是node_modules下的模块，commons为公共库模块，打包的应该是src下的模块
module.exports = {
optimization: {
splitChunks: {
cacheGroups: {
base: {
//打包基础库base.js
name: "base",
test: /[\\/]node_modules[\\/]/, //打包node_modules下的模块
chunks: "all",
},
common: {
//打包公共模块
name: "common",
test: /[\\/]src[\\/]/,
minSize: 1024,
chunks: "all",
}
}
}
},
};