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/