Webpack性能优化

Babel-loader ：转换ES6、ES7等JS新特性语法。

Css-loader：支持.css文件的加载和解析转换成commonjs对象

Style-loader：将样式通过<style>标签插入到head中

Less-loader ：将less文件转换成css

Ts-loader：将TS转换成JS

File-loader：进行图片、文字等的打包、富媒体文件、字体。

url-loader：处理图片和字体

Raw-loader：将文件以字符串的形式导入。

Thread-loader：多进程打包JS和CSS

CleanWebpackPlugin：清理构建目录

ExtractTextWebpackPlugin：将CSS从bundle文件里提取成独立的CSS文件

HtmlWebpackPlugin：创建html文件去承载输出的bundle

UglifyWebpackPlugin：压缩JS

PostCSS + autoprefixer： ⾃动补⻬ CSS3 前缀。

px2rem-loader：移动端 CSS px ⾃动转换成 rem。 ⻚⾯渲染时计算根元素的 font-size 值，可以使⽤⼿淘的lib-flexible库换成 rem。

热更新

HotModuleReplacementPlugin

原理：分为第一次打包和第二次打包，第一次打包将js代码打包成bundle.js传给Bundle Server然后让客户端可以以loacalhost8080这种服务器访问的方式访问。第二次，当我修改了代码之后，webpack会打补丁一样，将修改的部分打包，然后给到HMR server，这个服务器就会以字符串的形式，告诉HMR runtime，哪些地方被修改了，哪些地方需要更新。

文件指纹：用来做版本的管理，比如某个文件修改了，并不需要把所有的文件都

发布，只要发布修改了的那部分就行了。

文件指纹

Hash：和整个项⽬的构建相关，只要项⽬⽂件有修改，整个项⽬构建的 hash 值就会更改

Chunkhash：和 webpack 打包的 chunk 有关，不同的 entry 会⽣成不同的 chunkhash 值

Contenthash：根据⽂件内容来定义 hash ，⽂件内容不变，则 contenthash 不变。

性能优化：

l JS压缩：内置了 uglifyjs-webpack-plugin，webpack4如果mode设置成production那么将会自动的进行压缩。

l CSS⽂件的压缩：使⽤ optimize-css-assets-webpack-plugin。同时使⽤ cssnano。

l HTML⽂件的压缩：html-webpack-plugin。

l 基础库分离：html-webpackexternals-plugin。思路：将 react、 react-dom 基础包通过 cdn 引⼊，不打⼊ bundle 中。

l 公共脚本分离：SplitChunksPlugin，分离⻚⾯公共⽂件。

l tree shaking(摇树优化)：个模块可能有多个⽅法，只要其中的某个⽅法使⽤到了，则整个⽂件都会被打到bundle ⾥⾯去， tree shaking 就是只把⽤到的⽅法打⼊ bundle ， 没⽤到的⽅法会在uglify 阶段被擦除掉。

l scope hoisting

现象：构建后的bundle.js代码存在⼤量闭包代码. 运⾏代码时创建的函数作⽤域变多，内存开销变⼤,⼤量作⽤域包裹代码，导致体积增⼤（模块越多越明显）

结论:被 webpack 转换后的模块会带上⼀层包裹。import 会被转换成 __webpack_require

分析：

· 打包出来的是⼀个匿名闭包

· modules 是⼀个数组，每⼀项是⼀个模块初始化函数

· 通过 WEBPACK_REQUIRE_METHOD(0) 启动程序

原理： 将所有模块的代码按照引⽤顺序放在⼀个函数作⽤域⾥，然后适当的重命名一些变量以防⽌变量名冲突。

对⽐：通过 scope hoisting 可以减少函数声明代码和内存开销。

l 代码分割：

对于⼤的 Web 应⽤来讲，将所有的代码都放在⼀个⽂件中显然是不够有效的，特别是当你的某些代码块是在某些特殊的时候才会被使⽤到。 webpack 有⼀个功能就是将你的代码库分割成chunks（语块），当代码运⾏到需要它们的时候再进⾏加载。

懒加载：plugin-syntax-dynamic-import

服务端渲染：HTML + CSS + JS + Data -> 渲染后的 HTML。

所有模板等资源都存储在服务端，内⽹机器拉取数据更快，⼀个 HTML 返回所有数据

客户端渲染：多个请求（HTML，数据），HTML和数据串行加载、前端渲染。

服务端渲染： 一个请求，返回HTML和数据。核心是减少请求。

服务端渲染优势：减少⽩屏时间、对于 SEO 友好。客户端渲染刚开始拉下来的HTML其实是一个空的模板，而服务端渲染拉下来的时候页面就有数据比较丰富，有利于爬虫抓取数据。

思路：使⽤ react-dom/server 的 renderToString ⽅法将React 组件渲染成字符串，再把这个string丢到HTML模板里面去，服务端路由返回对应的模板。

做法：使⽤打包出来的浏览器端 html 为模板，在模板中设置占位符，动态插⼊组件，就可以解决样式不显示的问题。通过设置占位符，服务端获取数据然后替换占位符。

多页应用：每⼀次⻚⾯跳转的时候，后台服务器都会给返回⼀个新的 html ⽂档，这种类型的⽹站也就是多⻚⽹站，也叫做多⻚应⽤。glob.sync。