Webpack优化总会让你不得不爱

在家的日子不能出去玩，不能出去吃，的确是很不开心的，不过也是真的增加了好多空闲时间
与其在家呆着无聊，不如安安静静的学习一下
疫情期间，不管怎样，心态不能崩，武汉加油，中国加油
闲言少叙，现在我们就开始一起学习吧
优化是个好词
优化，就是加以改变或选择使优良，在工作当中是让提升效率的好办法。
当然，webpack优化千千万，但我觉得这些就够了
首当其冲的，就是工作中那些用不到的样式，可能是由于历史遗留原因已经忘记哪些是没有使用的样式了，一一排查太过耗时费力了
于是，purgecss-webpack-plugin和glob它俩就登场了，它的作用就是解决上面提到的问题，让我们来看看如何使用吧
插件千万个，安装第一步：

安装： npm i purgecss-webpack-plugin glob -D

1. 去除无用的样式
   工欲善其事必先利其器，装备好了，我们也来看一眼实际的情况，然后再进行有效的配置吧

上图中就有一个没有被使用到的类名logo，所以如果在打包抽离出来的css文件里，肯定是不希望看到它的
那么，不废话，解决它，我们开始配置吧
// webpack.config.js文件

const path = require(‘path’);
// html模板
const HtmlWebpackPlugin = require(‘html-webpack-plugin’);
// 从js中抽离出css
const MiniCssExtractPlugin = require(‘mini-css-extract-plugin’);

// 去除无用的样式
const glob = require(‘glob’);
const PurgecssWebpackPlugin = require(‘purgecss-webpack-plugin’);

module.exports = {
entry: ‘./src/index.js’,
output: {
filename: ‘bundle.js’,
path: path.resolve(‘dist’)
},
module: {
rules: [
{
test: /.jsKaTeX parse error: Expected 'EOF', got '}' at position 100: … } }̲, {…/,
use: [MiniCssExtractPlugin.loader, ‘css-loader’]
}
]
},
plugins: [
new HtmlWebpaclPlugin({
template: ‘./src/index.html’
}),
new MiniCssExtractPlugin(),
// 去除无用的样式
new PurgecssWebpackPlugin({
paths: glob.sync(’./src/**/*’, {nodir: true})
})
]
};
复制代码配置完毕了，上面包含了一些基本的配置。大家可以把重点放在注释为去除无用的样式代码部分即可了
下面我们来简单分析分析：

glob是用来查找文件的

glob.sync(’./src/**/*’, {nodir: true}
// 同步查找src目录下的任意文件夹下的任意文件
// 返回一个数组，如[‘真实路径/src/css/style.css’,‘真实路径/src/index.js’,…]
// {nodir: true}表示不包含文件夹，加快查找速度
复制代码
purgecss-webpack-plugin是去除无用的css

new PurgecssWebpackPlugin({
// paths表示指定要去解析的文件名数组路径
// Purgecss会去解析这些文件然后把无用的样式移除
paths: glob.sync(’./src/**/*’, {nodir: true})
})
复制代码
大功告成，进入下一环节！！！
2. 动态添加CDN
在html文件中引入cdn文件，在webpack配置externals，这样就不会打包引入的cdn的库
// index.html文件

// webpack.config.js文件

module.exports = {
externals: {
‘jquery’: 'KaTeX parse error: Expected 'EOF', got '}' at position 7: ' }̲ } 复制代码这样写完后…操作符了
But，这只是个过渡而已，下面有请主角登场
由于每次都需要在index.html模板中手动引入需要的cdn文件，然后还要在webpack里配置，有点繁琐了
So，html-webpack-externals-plugin这样的插件就应运而生了
安装步骤我就略过了，直接看代码
// webpack.config.js文件

// 动态添加CDN
const HtmlWebpackExternalsPlugin = require(‘html-webpack-externals-plugin’);

module.exports = {
plugins: [
new HtmlWebpackExternalsPlugin({
externals: [
{ // 引入的模块
module: ‘jquery’,
// cdn的地址
entry: ‘https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js’,
// 挂载到了window上的名称
// window.jQuery就可以全局使用
global: ‘jQuery’
},
{
module: ‘vue’,
entry: ‘https://cdn.bootcss.com/vue/2.6.10/vue.min.js’,
global: ‘Vue’
}
]
})
]
};
复制代码
3. Tree-shaking
这是一个webpack内置的优化能力，webpack很好很强大，哈哈
在生产环境下，Tree-shaking会进行自动删除的操作
如果通过ES6的import引用的方式就会把没有用到的代码给删除掉
那么在打包的时候，就不会打包那些未引用的方法了
接下来，我们看个栗子：
在src目录下新建一个common.js，然后在里面随便写点东东
// src/common.js文件

export const flatten = arr => {
console.log(‘my-flatten’);
return arr.reduce((all, cur) => {
if (Array.isArray(cur) {
return […all, …flatten(cur)];
} else {
return […all, cur];
}
}, []);
};

export const myBind = (fn, context) => {
console.log(‘my-bind’);
let args = [].slice.call(arguments, 2);
return function() {
let newArgs = [].slice.call(arguments);
fn.apply(context, args.concat(newArgs));
}
};
复制代码import引用一下
// index.js文件

import { flatten } from ‘./common’;

let arr = [1,[3,[4, 5]], [2, [20]]];
console.log(flatten(arr));
复制代码
因为只在生产环境下有效果，可以去dist文件中检查一下，是没有console.log(‘my-bind’)的代码的，这就说明完美的去掉了没有引用到的代码了
完美，完美，完美了
高兴的太早了，是药三分毒，有副作用的
副作用
现在我们在src目录再创建一个test.js文件，让大家再感受一下副作用
// src/test.js文件

export default test = () => {
console.log(‘test’);
}

test();
复制代码此时，简单修改一下index.js
// index.js文件

import { flatten } from ‘./common’;
import test from ‘./test’;

let arr = [1,[3,[4, 5]], [2, [20]]];
console.log(flatten(arr));
复制代码尽管引入了test但是并没有使用，可是打包后的bundle.js文件却变化了，请看大屏幕

可想而知，副作用出现了，去dist目录下再看看bundle.js的内容，发现了打印test字段的代码。
肿么办？没引用却打包进去了，表慌，让我们来将文件标记为无副作用的
干掉副作用
需要配合package.json文件，在里面添加一个sideEffects属性，赋值为false就把这些副作用给干掉了不会再打包进去了，So Easy
// package.json文件
{
…省略
“sideEffects”: false
}
复制代码
不过貌似，没有看到打包出来的css文件呢，回头看之前的截图，是打包出3个文件的，其中就包括main.css
CSS去哪儿了？
很好理解，因为我们在js中引入css文件是import './style.css’这样，所以就出现了副作用，引用却没使用的尴尬
也是因为sideEffects: false一股脑的全给标记过滤掉了
现在修改一下sideEffects的值就可以，给它一个去除副作用的范围
// package.json文件

{
…省略
“sideEffects”: ["./src/**/*.css"]
}
复制代码过滤掉引入的css文件产生的副作用，这样走丢的css文件就又找回来了

至此，webpack内置的Tree-shaking就说完了，是不是很有意思，webpack大法好
下面一鼓作气继续说个内置的插件，非常实用，come on baby
4. DllPlugin动态链接库
很多时候我们在开发时无论是用React还是Vue，我们都不希望这个开发的主力框架每次都被打包一遍，这样也是费时费力的事情
所以，出现了DllPlugin这种插件，它纯属webpack内置的，放心大胆的用
作用：

在第一次打包的时候就把打包用到的开发框架直接打包好，然后会生成一个manifest.json文件
再打包的时候，只要有import React from 'react’这样的引用，它就会先去所谓的缓存文件里找，找到了就直接用，也不用再进行对react打包了
当然，如果没找到的话，再对框架打包一遍也无伤大雅

说多了，都是泪，看代码更实在，重写index.js
// index.js文件

import React from ‘react’;
import { render } from ‘react-dom’;
import ‘./style.css’;

render(<React.Fragment>

听妈妈的话-周杰伦

显示歌词
</React.Fragment>, window.root);
复制代码把index.js重写后我们再来npm run build打包一下看看

但是这很不科学，因为很多时候没有必要把开发框架也打包到我们写的逻辑代码中
所以，接下来我们来看看DllPlugin会帮我们怎么处理吧
创建动态链接库
在根目录下创建一个webpack.dll.js文件，用来打包出dll文件
// webpack.dll.js文件

const path = require(‘path’);
// 引入webpack
const webpack = require(‘webpack’);

module.exports = {
entry: [‘react’, ‘react-dom’],
output: {
filename: ‘react.dll.js’,
path: path.resolve(‘dll’),
library: ‘react’ // 打包后被引用的变量名
},
plugins: [
// 动态链接库
new webpack.DllPlugin({
name: ‘react’,
path: path.resolve(‘dll’, ‘manifest.json’)
})
]
};
复制代码代码写完了，npm run dll，之后会出现一个dll的文件夹，里面会包含你打包出来的文件，如下图

打包完成后，接下来轮到我们引用的时刻到了
引用动态链接库
回到我们的主战场webpack.config.js中
// webpack.config.js文件

const path = require(‘path’);
// 引入webpack
const webpack = require(‘webpack’);

module.exports = {
plugins: [
// 引用对应的动态链接库的manifest.json文件
// 这样以后再引入react的时候就会优先在json文件里去寻找
new webpack.DllReferencePlugin({
manifest: path.resolve(‘dll’, ‘manifest.json’)
})
]
};
复制代码写到这里还不算完，还需要在src目录下的index.html模板中引入一下

插一句：之所以，会新建一个dll目录，因为在npm run dev开发环境编译的时候，dist目录的内容都在内存中了，是找不到react.dll.js文件的
好了，现在让我们看看效果吧，npm run dev启动一下

当然，也许有人会问，如果需要引入的文件比较多怎么办？
每次在index.html中手动引入毕竟不是长久之计，那么接下来就再看一个好东东
动态引入js
通过add-asset-html-webpack-plugin插件就可以完成这样的需求，来看代码
// webpack.config.js文件

const webpack = require(‘webpack’);
// 添加资源到html文件
const AddAssetHtmlWebpackPlugin = require(‘add-asset-html-webpack-plugin’);

module.exports = {
plugins: [
// 引用打包好的react，不会打包到bundle里
new webpack.DllReferencePlugin({
manifest: path.resolve(‘dll’, ‘manifest.json’)
}),
// 直接将打包好的react.dll.js添加到html模板
new AddAssetHtmlWebpackPlugin({
filepath: path.resolve(‘dll’, ‘react.dll.js’)
})
]
};
复制代码通过上面的改造后，就动态的把react.dll.js文件添加到html文件中了。
我们之前在index.html模板里手动引入js的那一行就可以删除掉了
5. 懒加载
说到懒加载必然是一种很好的优化网页或应用的方式，那么在webpack中也是通过ES6的import()语法来引入的。
虽然这个import()语法目前还处在草案的第三阶段，不过并不影响大家对它的一致好评
用过Vue-Router的同学都知道，大家写的路由通过component: () => import()的方式，也是可以进行懒加载的
So，好饭不怕晚，早晚会成为正式一员的。下面还是用实际栗子演示一下吧
// index.js文件

import ‘./style.css’;
import React from ‘react’;
import { render } from ‘react-dom’;

// 写个辅助的类
class Music extends React.Component {
constructor() {
super();
this.state = { lrc: [] };
}
showLrc() {
// 通过ES6的import()方法实现了懒加载功能，实际上是利用了jsonp去动态导入了
import(’./lrc’).then(data => {
let lrc = data.default.split(’\n’).filter(item => item !== ‘’);
this.setState({ lrc });
});
}
render() {
return (

<button className=“btn” onClick={() => this.showLrc()}>显示歌词

{this.state.lrc && this.state.lrc.map((item, index) => (

{item}

))}

)
}
}

render(<React.Fragment>

听妈妈的话-周杰伦

</React.Fragment>, window.root);
复制代码npm run dev让我们看看是不是有了懒加载的效果

通过上面的gif图可以看到，当点击显示歌词的时候，加载了一个0.bundle.js文件
这个文件就是我们通过懒加载导入的lrc.js文件，由此可见，懒加载功能验证成功，撒花
接下来再来个老生常谈的优化，请继续往下看，不要停
6. 抽取公共代码
开发的时候，经常会有不同的模块引用了同一个第三方包。
这里举个栗子，比如有两个js文件，一个是index.js另一个是lrc.js，它们都引用了著名的实用工具库lodash，代码如下下下
// index.js文件

import _ from ‘lodash’;
console.log(_.xor([2, 1], [2, 3]));

// lrc.js文件
import _ from ‘lodash’;
console.log(_.flatten([1,[3, 4, 5, [2]]]));
复制代码看完以上代码就明白了，他们的公共部分就是都引了lodash，这样会分别打包到他们所在的文件中去，这样打包的js文件就会很大了
所以，必须得把lodash提取出来，废话不多说，看招
抽取第三方模块
// webpack.config.js文件

module.exports = {
optimization: {
splitChunks: {
cacheGroups: {
vendor: {
chunks: ‘initial’,
minSize: 0,
minChunks: 2,
test: /node_modules/,
priority: 1
}
}
}
}
};
复制代码webpack4中自带了抽取公共代码的方法，通过optimization里的splitChunks来做到

抽离第三方模块有两点好处

不会和业务逻辑打包在一起
增加缓存 304

抽取公共模块
当然了，项目中很多js文件不仅仅会引用第三方模块来开发，我们也会使用写好的公共模块，那么是不是也可以提取出来呢？
// index.js文件
import { flatten } from ‘./common’;
console.log(‘index’,flatten([1,[33, 4, 5, [34]]]));

// lrc.js文件
import {flatten} from ‘./common’;
console.log(flatten([1,[33, 4, 5, [34]]]));
复制代码上面在两个js文件中都引入了common.js中写好的flatten方法，既然它们都引用到了common.js，所以想当然的也可以把它抽取出来的
那么参照提取第三方代码的实现来写一下吧
// webpack.config.js文件

module.exports = {
optimization: {
splitChunks: {
cacheGroups: {
utils: {
chunks: ‘initial’,
minSize: 0,
minChunks: 2
}
}
}
}
};
复制代码
以上就是抽取公共代码部分了，到此为止了
7. 热更新
热更新对于开发来说可以说是非常高效的，而且webpack现在也自带插件支持热更新了
通过devServer来启动热更新
☆：devServer的使用需要在项目中提前安好webpack-dev-server
那么我们先来看看配置部分：
// webpack.config.js文件

// 引入webpack
const webpack = require(‘webpack’);

module.exports = {
devServer: {
hot: true, // 启动热更新
port: 8080,
contentBase: ‘./dist’
},
plugins: [
// webpack支持热更新插件
new webpack.HotModuleReplacementPlugin(),
// 打印更新了的文件路径
new webpack.NamedModulesPlugin()
]
};
复制代码热更新只适合在开发环境下来搞，所以配置好后，再执行npm run dev
现在让我们回到index.js文件里去，让我们感受一下
// index.js文件

// 热更新
// 在src目录下新创建了audio.js文件
// 需要导入这个文件，不然热更新失效
import audio from ‘./audio’;

// 检查是否支持热更新
if (module.hot) {
// 接收热更新的模块
module.hot.accept(’./audio.js’, (path) => {
console.log(path);
console.log(‘audio文件更新了’);
});
}
复制代码这样就完成了热更新操作，接收了audio.js文件，所以在audio.js文件内部如果进行修改保存后，会在控制台里展示对应的更新信息，如下图

热更新现在可是开发中的老朋友，很多IDE都配置了热更新操作，比如像Android Studio这样的编译器，通过热更新来加快编译速度
好了，不啰嗦了，下面还是干货满满的，Enjoy it
8. 跨域请求
严格意义上来讲，通过webpack来做跨域请求实际上也不能算在优化里。不过在开发中，这种跨域的情况还是很多的，了解了也不吃亏，一起看看吧
还是通过老朋友devServer来实现的，上代码

第一种跨域方式

// webpack.config.js文件

module.exports = {
devServer: {
proxy: {
// 可以这样写
// ‘/api’: ‘http://localhost:3000’,
// 也可以这样写，多配置
‘/api’: {
target: ‘http://localhost:3000’,
pathRewrite: {
‘^/api’: ‘’
}
}
}
}
};
复制代码通过devServer提供的proxy属性，可以完成我们想要的跨域请求，下面看看参数都是干什么的

target

指定要跨域请求的url
比如你请求/api/userInfo就会代理到http://localhost:3000/api/userInfo

pathRewrite

顾名思义，重写路径
接口不可能都是/api开头的，所以如果遇到个接口是/getSongs
而不是/api/getSongs的接口地址，会把以/api重写改为空字符
最后就可以访问http://localhost:3000/getSongs

第二种跨域方式

// webpack.config.js文件

module.exports = {
devServer: {
// 利用node来写
before(app) {
// 相当于直接写了后端的接口，哈哈
app.get(’/api/info’, (req, res) => {
res.json({
nickname: ‘我滴个大榴莲啊’,
level: 8,
src: ‘https://music.163.com/song/media/outer/url?id=1382794914.mp3’
});
});
}
}
};
复制代码当然，以上两种方式大家知道即可了，第一种也是最普遍的实现方式，妈妈再也不用担心我的跨域问题了
9. IgnorePlugin
作用： 忽略打包第三方模块指定的目录
为什么要忽略呢？ 通过下面的栗子来看一下
相信很多人应该或多或少的都听过moment这个时间库，不知道也没关系，我来演示一波
先安装moment： npm i moment -S
// index.js文件

// 导入moment
import moment from ‘moment’;

// 设置中文
moment.locale(‘zh-cn’);
let time = moment().endOf(‘day’).fromNow();

window.root.innerHTML += time;
复制代码
页面上展示的一点毛病都没有，不过如果看一下打包的情况就会发现有瑕疵了，你看

设置了中文，却把整个语言包都打包进去了，这样很不好
这是神马原因呢，其实是因为moment被导入的时候，附赠了整个locale语言包，这种买一赠一的行为就不用提现在代码世界了，吃不消了

我们需要用中文包，但是不想打包全部语言包，就让IgnorePlugin出马了
// webpack.config.js文件

const webpack = require(‘webpack’);

module.exports = {
plugins: [
// 忽略moment目录下的locale文件夹
new webpack.IgnorePlugin(/./locale/, /moment/)
]
};
复制代码配置改写后，再回到index.js中单独导入中文语言包就好了
// index.js文件

// 利用IgnorePlugin把只需要的语言包导入使用就可以了，省去了一下子打包整个语言包
import moment from ‘moment’;
// 单独导入中文语言包
import ‘moment/locale/zh-cn’;

let time = moment().endOf(‘day’).fromNow();

window.root.innerHTML += time;
复制代码再重新npm run build打包后，体积瞬间减少了278k啊啊啊啊，下图显示

10. noParse
    noParse的作用是不去解析你所使用的第三方库中的依赖库
    废话不多说，直接上代码
    // webpack.config.js文件

module.exports = {
module: {
// 不去解析jquery或lodash中的依赖库
noParse: /jquery|lodash/,
rules: [
{
test: /.js$/,
use: {
loader: ‘babel-loader’
}
}
]
}
}
复制代码在工作中，忽略大型的库可以提高构建性能，可以从构建时间上看出来速度的提升，如上面代码中提到的jquery和lodash
11. resolve
从这个英文就能看出来，它就是配置模块如何解析用的，配置太多也没必要一一介绍了，还是直接说重点写出常用的配置吧
resolve常用配置

modules

指定解析第三方包的目录位置

alias

指定import导入时的别名，简化引入

extensions

自动解析确定好的扩展名
默认会把js和json当做扩展名

// webpack.config.js文件

const { resolve } = require(‘path’);

module.exports = {
resolve: {
modules: [resolve(‘node_modules’)],
alias: {
Utils: resolve(__dirname, ‘src/utils/’),
‘@’: resolve(__dirname, ‘src’)
},
extensions: [’.js’, ‘.css’, ‘.json’]
}
}
复制代码此刻，我们往src目录下创建一个utils文件夹，然后新建一个parse-url.js文件
// src/utils/parse-url.js文件

// 就简单导出一下
export default ‘我是解析url的方法’;

// src/index.js文件

import parseUrl from ‘Utils/parse-url’;

console.log(parseUrl); // 打印：我是解析url的方法
复制代码上面代码为我们展示了alias别名的效果，真的是很有用很方便的，哈哈
12. include和exclude

include: 包含指定目录下的文件解析
exclude: 排除指定目录不进行解析

二者使用一个即可了，想必这个优化的点大家并不陌生的，看眼代码吧
module.exports = {
module: {
rules: [
{
test: /.js$/,
use: {
loader: ‘babel-loader’
},
exculde: /node_modules/, // 二选一
include: path.resolve(‘src’) // 二选一
}
]
}
}
复制代码13. happypack
webpack在Node环境下运行所以也是单线程操作，一件一件的去处理事情。这样很不nice，本着现在cpu都那么威猛的情况下，运用多核运算完全是小儿科的
https://weibo.com/ttarticle/p/show?id=2309404478143728583423
https://weibo.com/ttarticle/p/show?id=2309404478143254626836
https://weibo.com/ttarticle/p/show?id=2309404478143023939734

于是乎，就有了happypack的用武之地了，它的作用就是可以实现多进程打包操作
下面我们再来看下是如何配置的
配置前先来安装一下npm i happypack -D
// webpack.config.js文件

const Happypack = require(‘happypack’);

module.exports = {
module: {
rules: [
{
test: /.jsKaTeX parse error: Expected 'EOF', got '}' at position 62: …s' }̲, {…/,
use: ‘Happypack/loader?id=css’
}
]
},
plugins: [
new Happypack({
id: ‘js’,
use: [
{
loader: ‘babel-loader’,
options: {
presets: [
‘@babel/preset-env’,
‘@babel/preset-react’
]
}
}
]
}),
new Happypack({
id: ‘css’,
use: [‘style-loader’, ‘css-loader’]
})
]
}
复制代码差不多了，大家真的辛苦了，哈哈，坚持看下来的小伙伴，真是太给力了