Webpack配置-项目优化

Terser

Terser是一个JavaScript的解释（Parser）、Mangler（绞肉机）/Compressor（压缩机）的工具集；早期我们会使用 uglify-js来压缩、丑化我们的JavaScript代码，但是目前已经不再维护，并且不支持ES6+的语法；Terser是从 uglify-es fork 过来的，并且保留它原来的大部分API以及适配 uglify-es和uglify-js@3等；也就是说，Terser可以帮助我们压缩、丑化我们的代码，让我们的bundle变得更小。

webpack打包当mode是production的时候默认已经帮们使用了 Terser，如下图 所以一般我们做项目开发的时候没有必要去特殊的配置Terser，应为webpack已经做的足够好了（webpack还通过其他插件的配合吧代码压缩做到了有些Terser不能做到的压缩，所以往往自己配置的Terser没有webpack提供的压缩效果那么好），如果公司项目要求需要这一块的特殊设置也可以参考一下网站设置自定义的Terser
github.com/terser/ters…

CSS的压缩

CSS压缩通常是去除无用的空格等，因为很难去修改选择器、属性的名称、值等；使用到的插件是 css-minimizer-webpack-plugin；

这个需要单独安装安装指令如下：
npm install css-minimizer-webpack-plugin -D
webpack配置如下：
打包结果：（就是清除了所有的空格）

Tree Shaking

• 什么是Tree Shaking

  Tree Shaking就是删除文件中未使用的代码，从而达到体积优化的效果

• webpack实现Tree Shaking采用了两种不同的方案

  • usedExports：通过标记某些函数是否被使用，之后通过 Terser来进行优化的； 需要结合 Terser一起使用，通过代码注释的方式告诉 Terser那些代码是可以移除的（unused harmony export mul）如果需要测试需要看效果需要将 webpack mode改成development应为在production模式下已经做了无用代码消除的操作（个人感觉这样设置用处不是很大，所以这里就不做太多的演示了，有兴趣的同学可以自己试一下）

  • sideEffects：跳过整个模块/文件，直接查看该文件是否有副作用；（副作用：就是有些文件导入了，但是并没有使用导出的对象，但是如果文件中修改了全局对象之类的东西就会影响到整个项目，这就带来了副作用）

    使用方式：在package.json中设置sideEffects的值，如果设置成为false,就是告知webpack可以安全的删除未用到的exports；,也可以传入数组如图所示 这样 index.js文件的所有代码都不会被打包

    同样的如果公司的项目没有什么特殊的需求只要将 webpack 的模式改成 productionwebpack会帮我们消除无用的代码

• CSS实现Tree Shaking

  主要是借助 PurgeCss插件来实现Tree Shaking，首先需要安装对应插件

  安装命令：yarn add purgecss-webpack-plugin -D
  具体webpack配置如下图: 打包结果如下图所示：

Scope Hoisting

主要作用是对作用域进行提升，并且让 webpack 打包的代码更小，运行更快。模式 production会自动启用Scope Hoisting，development模式下需要使用webpack内置的plugin启用如下图：
new webpack.optimize.ModuleConcatenationPlugin();

HTTP压缩

HTTP压缩是一种内置在服务器和 客户端之间的，以改进传输速度和带宽利用率的方式；
主要实现方式: 兼容压缩格式的浏览器在发送请求的时候就高速服务器，该浏览器兼容的格式，然后服务器会直接返回对应的压缩文件并且在响应头信息中告诉浏览器传输文件的格式
浏览器告诉服务器支持格式截图

服务器告知浏览器截图：

• 目前的几种压缩格式：
  • compress – UNIX的“compress”程序的方法（不推荐大多数应用使用，应该使用gzip或deflate）
  • deflate – 基于deflate算法的压缩，使用zlib数据格式封装；
  • gzip – GNU zip格式（定义于RFC 1952），是目前使用比较广泛的压缩算法；
  • br – 一种新的开源压缩算法，专为HTTP内容的编码而设计；
• Webpack对文件压缩（这里只是对文件压缩，如果实现浏览器拉取也是压缩文件，需要服务器配置）
  • 安装插件：
    yarn add compression-webpack-plugin -D
  • 配置
  • 打包结果
    
    发现此时打包文件冲床两个文件一个是源文件，一个是压缩后的文件，一般会将两个文件都上传到服务器，如果浏览器不支持压缩格式就可以直接返回源文件，压缩文件也上传服务器的原因是，nginx首先检查是否存在请求静态文件的gz结尾的文件，如果有则直接返回该gz文件内容。没有的话则需要服务器进行压缩，所以上传压缩文件也可以减轻服务器cpu的负担
• 对代码进行压缩
  可以直接使用 HtmlWebpackPlugin插件，其中可以配置 minify参数默认会使用html-minifier-terser插件代码进行压缩 同样的在模式 production下默认已经启用

封装Library

打包自己的库文件具体带包代码如下： 打包配置如下：
使用方式： 直接通过cdn方式或者npm包管理方式集成然后引入调用即可