webpack梳理之常用plugin(优化)

Absorbed_zhang

已于 2022-03-23 00:58:19 修改

阅读量1k

点赞数 4

分类专栏：回顾基础 webpack梳理文章标签： webpack javascript 前端性能优化 plugin

于 2022-03-16 00:45:20 首次发布

本文链接：https://blog.csdn.net/weixin_44403976/article/details/123514854

版权

回顾基础同时被 2 个专栏收录

29 篇文章 0 订阅

订阅专栏

webpack梳理

6 篇文章 0 订阅

订阅专栏

常用plugin

clean-webpack-plugin
purifycss-webpack
DLLPlugin
IgnorePlugin

1.clean-webpack-plugin

这个插件,总体来说是用于每次打包之前删除dist文件夹内上次打包的内容的,打包没那么只能,他是不能自主判断你两次打包是否是重复的是否是需要重新来打包的,特别是你用了哈希值这样的文件后缀之后,话说回来,这个插件踩坑的人可算是不少,满坑满谷的都是踩坑的,我预估是之前的官方文档可能有问题,但是现在npm文档已经没有问题了,引用的方式也是正确的,使用的示例也是正确的,不用担心

const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const webpackConfig = {
	plugins: [
		new CleanWebpackPlugin(),
	],
};

参数:我就用官方翻译来做解释了,实际上不配置参数挺好,插件在开发时就已经默认参数为大多数情况适用配置
dry: 模拟删除文件,默认是false,模拟,就是没删,但是打印还是打印的
verbose:是否要打印在终端上,就是打包时候执行的时候是否要知道删除某某文件的结果
cleanStaleWebpackAssets:是否要删除没用到的文件,我们有时候会copy插件复制一些静态文件,用请求的方式调用
protectWebpackAssets:不允许删除当前网页包资产,这个是啥意思呢,我也没查到,默认是true,意思是文件打包过去不允许手都删除?明天我试一下这个
还有四个,我没用过这几个参数,我翻译了一下我自己也搞不懂在说什么,查资料也都说用不到,我们不再赘述

以上这就是正确的使用方式了,引入的时候解构赋值,使用的时候不用传目录名,因为插件会自己寻找webpack输出的出口

2.purifycss-webpack

purifycss-webpack其实是在做一件很常规的事情,这件事情叫Tree Shaking,意思是摇树,名字特别的形象,就是把没有用到的东西摇下来,实际上我们现在在开发的时候已经会有eslint语法检查,没有用到的东西会提示错误,但是这个依旧是一个常用的插件,因为css还是会有重复和未被引用的情况出现,css的Tree Shaking就是把重复的或者没有用到的样式给去掉,用的插件就是purifycss-webpack,我们来看实际用法

//在plugin中配置的时候
new PurifyCss({
	paths: glob.sync([ // 传入多文件路径pat
		h.resolve(__dirname, './*.html'), // 处理根目录下的html文件
		path.resolve(__dirname, './src/*.js') // 处理src目录下的js文件
	])
})

注意事项:“官方提示这个插件需要和extract-text-webpack-plugin一起使用,因为这个插件是需要输出资源的,如果没有单独的css去输出资源的话,这个插件起不到任何作用”,这里就有问题了嗷,extract-text-webpack-plugin再webpack4就不支持使用了的,因为purifycss-webpack其实也都是五年前的东西了,所以配套的extract-text-webpack-plugin已经过时了,用我们前边章节讲的mini-css-extract-plugin,来替换掉官方文档建议的插件,网上搜的也都要考虑自己的webpack版本,不能乱用的,是不支持的

3.DLLPlugin

相信绝大部分人都被webpack超长的打包时间所困惑过,完全不理解为啥会耗费这么长的时间,这是因为我们自己的脚手架有时候会用很多的第三方库和组件,这些东西都会在我们编译的时候被编译进去,然而这些库其实是不经常更新的,这样我们每次的编译其实都是多余的规则,webpack社区有两种方案,第一种是CommonsChunkPlugin,这个是把第三方库跟我们的代码编译后分开,但是还是要走原来的流程没啥作用,另一个就是DLLPlugin,这个实际上是一个配置文件,作用就是可以只编译我们的核心代码,其他的我们不经过编译直接使用
DllPlugin是webpack内置的插件,我们做的就是创建一个webpack.dll.config.js,不需要额外安装,直接配置webpack.dll.config.js文件

//webpack.dll.config.js
module.exports = {=
  entry: {
    // 第三方库
    react: ['react', 'react-dom', 'react-redux']
  },
  output: {
    // 输出的动态链接库的文件名称，[name] 代表当前动态链接库的名称，
    filename: '[name].dll.js',
    path: resolve('dist/dll'),
    // library必须和后面dllplugin中的name一致 后面会说明
    library: '[name]_dll_[hash]'
  },
  plugins: [
  // 接入 DllPlugin
    new webpack.DllPlugin({
      // 动态链接库的全局变量名称，需要和 output.library 中保持一致
      // 该字段的值也就是输出的 manifest.json 文件 中 name 字段的值
      name: '[name]_dll_[hash]',
      // 描述动态链接库的 manifest.json 文件输出时的文件名称
      path: path.join(__dirname, 'dist/dll', '[name].manifest.json')
    }),
  ]
}

这里就是dll的配置,webpack打包之前先执行这个配置文件,执行语句为webpack --config webpack.dll.js --mode=development,这里也可以配置为命令,执行这个命令会生成一个manifest.json文件,这个文件的名称就是entry配置的名称-manifest.json,这个名称需要记住规则,因为再webpack.config.js中配置是要使用的

  new webpack.DllReferencePlugin({
    context: __dirname,
    manifest: require('./dist/dll/react.manifest.json')
  }),

在webpack里需要配置这个manifest文件,用来使DllReferencePlugin这个插件找到生成的配置文件,然后再入口文件中引入react.dll.js就可以了

<body>
  <div id="app"></div>
  <!--引用dll文件-->
  <script src="../../dist/dll/react.dll.js" ></script>
</body>

注意看这个Dll到了第做了什么,实际上不是很复杂,只不过是在我们常用的逻辑之外
Dll先是通过配置文件,找到了我们配置的一些第三方库或者组件,这些库被我们生成了一个js库,而且给出了一个manifest配置,这个配置就是Dll库的配置文件,当找通过我们配置的名称找到这个文件的时候,我们就会再manifest的配置找寻找模块,找到了就去生成的Dll库中拿,就不再经过打包路径了,通俗一些来讲,就是我把东西都包装好在一个库里,这个库放在了build文件夹内,给你了你一个目录,你那边打包的时候,通过DllReferencePlugin来找目录(manifest),找到的话说明是有的,那你就不用管了,为啥,因为入口文件html已经手动引入了,所以说html内引入也很好理解,webpack所有的流程就到目录那看有没有就已经结束了,库还是需要我们自己引入的,因为目录里有的webpack会默认为可以打包好的代码可以直接使用

4.IgnorePlugin

IgnorePlugin是一个webpack内置的plugin,这个无需装包,就可以直接使用,作用也很好理解,就是忽略第三方包指定目录,让这些指定目录不要被打包进去,经典用法,忽略moment的其他语言内容,只打包我们用到的内容

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

IgnorePlugin 虽然有时候不好筛选出来区分我们需要的和不需要的会一并给忽略掉,但是我们是可以手动引入的,这样就不会被忽略了

//手动在使用moment的下边引入语言包
import 'moment/locale/zh-cn.js';

本来看到了IgnorePlugin想说一下按需加载来着,但是回头想一想,是不是太简单了,elementUI的按需引入方案,使用babel-plugin-component,其实本质上是把引入的语法做了一个转换,转换为引入所需的单独文件,跟我们webpack内的忽略过滤文件原理不大相同,所以就暂且不说吧

总结: webapck的优化方式非常的多,通过各种插件可以进行非常细致的优化,可以说能让我们从各个角度去优化自己的使用体验,vite的打包方式当然是更加爽快,配置也少,但是vite的生态现在不好,还有就是我们实际上这些年沉淀了好些的老项目,vite最不好的地方就是很难从webpack去切换,创建新项目还好一些,老项目改造,我是吃够了苦的,话不多说,明天继续

Absorbed_zhang

关注

4
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
webpack梳理之常用plugin(优化)

常用pluginclean-webpack-pluginpurifycss-webpackDLLPluginIgnorePlugin1.clean-webpack-plugin这个插件,总体来说是用于每次打包之前删除dist文件夹内上次打包的内容的,打包没那么只能,他是不能自主判断你两次打包是否是重复的是否是需要重新来打包的,特别是你用了哈希值这样的文件后缀之后,话说回来,这个插件踩坑的人可算是不少,满坑满谷的都是踩坑的,我预估是之前的官方文档可能有问题,但是现在npm文档已经没有问题了,
复制链接

扫一扫