1.速度分析安装插件speed-measure-web pack-plugin NPM install-save-dev speed-measure-web pack-plugin，创建插件对象constspeedmessageplugin = require(' speed-measure-web pack-plugin ')；//引入插件consts MP = new speedeasureplugin()；//创建插件对象，并使用插件模块的wrap()方法包装配置，exports = smp.wrap ({entry: {index:'。/src/index.js '，搜索:“”。/src/search.js '，}，Output:{ path:path . join(_ _ dirname，' dist ')，/_ _ dirname(当前模块的目录名)+dist filename:'[name]_[chunk shah:8]。js '，//打包后输出的文件名，添加文件指纹chunkshash }，plugpins:打包后控制台会输出每个加载器的打包时间，打包速度可以根据时间进一步优化。image.png二世。量的分析量的分析可以分析哪些问题？依赖第三方模块文件大小业务中组件代码的大小，打包后可以清晰直观的看到。安装插件web pack-Bundle-Analyzer NPM Install-Save-Dev web pack-Bundle-Analyzer，引入插件并创建插件对象const { Bundle Analyzer Plugin } = require(' web pack-Bundle-Analyzer ')；添加plugpins配置插件:【新增bundle analyzer插件()】，打包完成后浏览器会打开http://127.0.0.1:8888/显示打包后的体积分析。image.png三世。包装速度的优化。webpack构建过程中直接影响构建效率的因素一是文件的编译，二是文件的分类和打包。 相比之下，文件的编译更费时，文件只能在节点环境下一个一个的解决，所以这个优化需要处理。 那么如何优化打包速度呢？1.使用webpack的高配版本和node.jswebpack4新版本的优化，使用v8引擎。v8带来的优化包括for替换forEachMap，Set替换object包括indexOf替换of()。默认情况下，使用更快的md4哈希算法，而不是md5算法。Md4比md5快。webpack AST可以直接从Loader传递到AST，从而减少解析时间。通过使用string方法代替node.js 2的正则表达式版本，进一步优化了原生js api和js数据结构。多进程/多实例构造(资源的并行解析)。在webpack的构建过程中，我们需要使用loader来比较js、Css、图片、字体等文件进行转换，转换后的文件数据量也非常大。而且这些转换操作不能并发求解文件，需要逐个求解。我们需要的是将这部分任务分解成多个子流程并行求解，子流程求解后将结果发送给主流程，从而减少总的构建时间。 可选方案thread-loader(正式推出)Parallel-WebPackApppackHappyPack注:由于HappyPack作者对js的兴趣逐渐丧失，以后维护会少一些。推荐webpack4及以后版本使用thread-loader的原理:webpack每次解析一个模块，HappyPack都会把它和它的依赖项赋给worker进程；HappyPack会划分模块。比如我们有多个模块，这些模块给HappyPack。首先在webpack编译器(hook)的run方法之后，进程会到达HappyPack，会做一点初始化。初始化后，将创建一个线程池，线程池将分配构建任务中的模块。例如，一个模块及其小的依赖项将被分配给一个HappyPack线程，等等。那么HappyPack的线程池将包括多个线程。此时，线程池中的这些线程将分别求解模块及其依赖关系。解决完成后，会有一个通信过程，将解决的资源传输到HappyPack的一个主进程，从而完成整个构建过程。 HappyPack从src目录中复制多个相同的页面。src.png在介绍HappyPack之前进行包装。build.png安装npm install - save-dev happypack注意:如果在webpack4中引入HappyPack5.0版本后，将js by rules的编译改为Happy，打包程序/加载程序规则:[{测试:/。js $/，//编译所有js后缀的文件使用:[//' Babel-Loader ' ' Happy Pack/Loader '，]，}，]添加Happy Pack-Loader插件:[New Happy Pack ({//3)重新添加你在# 1: loaders中替换的加载器:['Babel-loader']在插件中，})，]happypack.png很明显。可以看到使用happypack后打包速度快了很多。thread-loader原理:类似于HappyPack，每次webpack解析一个模块，thread-loader都会把它和它的依赖项赋给worker进程；安装NPM Install-Save-Dev thread-loader将thread-loader添加到规则中，可以少量配置Thread-Loader，比如workers(进程数)规则:[{test: /。js$/，//编译所有带js后缀的文件包括:path.resolve('src ')，// loader使用:['babel-loader '，意思是说，src目录下的js文件要用一次，{ loader: 'thread-loader '，选项:{ workers: 3，}，}，//'Happy Pack/Loader '，]，}，]thread-loader.png使用thread-loader后，打包速度也有明显提升。3.多进程/多实例代码压缩(并行压缩)在构建代码之后，输出之前，有一个代码压缩阶段。在这个阶段，还可以进行并行压缩，优化构建速度；可选web pack-parallel-uglify-plugin glifyjs-web pack-plugin server-web pack-plugin(推荐web pack 4.0，支持压缩es6代码)NPM安装terser-web pack-plugin-save-dev const terserplugin = require(' terser-web pack-plugin ')；将TerserPlugin插件添加到优化中，打开并行优化:{minimize: true，Minizer:[New terser plugin({//代码压缩插件并行:4，//打开并行压缩})，]，}，4。通过分包提高打包速度，可以使用html-webpack-externals-plugin将基础包分离，分离后再以CDN的形式引入所需的资源文件。缺点是必须为一个基本库指定一个CDN，在实际项目开发中可能会引用多个基本库和少量业务包。这样一来，很多脚本标签new htmlwebpackxternalsplugin({ externals:[{ module:' react '，Entry:' https://unpkg.com/react @ 16/UMD/react . development . js '，global:' react '，}，]，})进一步分包，使用预编译的资源模块与webpack的官方内置插件DLLPlugin分包，DdllReferenceRlugin引用manifest.json DLLPlugin可以将项目中涉及的组件和框架库，如react、reactdom、redux，打包到一个文件中同时生成manifest.json文件manifest.json是对分离包的描述。实际上，项目可以引用manifest.json在引用之后，由DLLReferencePlugin分隔的包就会关联起来。该文件用于将DLLReferencePlugin映射到相关的依赖项。首先用DLLReferencePlugin进行分包创建一个单独的构建配置文件webpack.dll.js，在这个配置文件中指定要分离的包，在package.json中加入编译语句“scripts”:{“dll”:“web pack-config web pack . dll . js”} web pack . dll . jsconst web pack = require(' web pack ')；const path = require(' path ')；module . exports = { mode:' development '，entry:{//对应库library in output: ['react '，' react-dom']，}，Output:{ filename:'[name]_[chunk shash]。' dll.js '，//分隔的文件名，一个占位符+hash.dll.js [name]对应库路径:path.join (_ _ dirname，Build/library ')，//输出到构建目录库:'[name]'在当前目录，//打包后公开的库的名称}，插件:[newwebpack.dll插件({name:' [name] _ [hash]'，//Namepath: path.join (_ _ dirname，' build/library/[name])。json ')在打包的library.json，//生成[name]的路径。打包后的json)，]，}；在nprun dll之后，在构建目录中会生成两个文件image.png，也就是前面提到的manifest.json构建完成之后，会使用DllReferencePlugin来引用manifest . JSON plugins:【new web pack . DllReferencePlugin({ manifest:require('。/build/library/library.json ')，})，]5。通过缓存提高二次打包的速度。babel-loader打开缓存。打开缓存。使用cache-loader或hard-source-web pack-plugin新的快乐包({loaders: ['Babel-loader？CacheDirectory=true']，})设置babel-loader的CacheDirectory=true打开缓存优化:{minimize: true，Minizer:[New terser plugin parallel:4，//open parallel compression cache:true，})，]，}，设置terser-webpack-plugin插件的缓存:true打开缓存并使用hard-source-web pack-plugin NPM install-save-dev hard-source-web pack-plugin插件:[New HardsourceWeb PackPlugin()]开始写缓存image.pngimage.png打开缓存后，显著提高了打包速度。6.缩小构建目标，构建尽可能少的模块。例如，babel-loader不解析node_modules，优化resolve.modules配置(降低模块搜索级别)，优化resolve.mainFields配置，优化resolve.extensions配置IV。打包体积优化主要集中在打包图片，js，css文件的资源体积优化1。图像压缩使用节点库的imagemin，配置image-webpack-loader优化图像，插件建立时识别图像资源，优化图像资源。imagemin的优势分析imagemin有很多定制选项，可以引入更多的第三方优化插件。比如pngquant可以引入多种图片格式的imagemin的压缩原理。pngquant是PNG的压缩器，通过alpha通道将图像转换为更高效的8位PNG格式(通常比24/32位PNG文件小60%-80%)，可以显著减小文件大小；Alpha通道指的是一张图片的透明和半透明pngcrush:其主要目的是通过尝试不同的压缩级别和PNG过滤方式来降低PNG IDAT数据流的大小；Optipng:涉及到pngcrush的灵感。 Optipng可以将图像文件重新压缩到较小的大小，而不会丢失任何信息；Ting:它还将24位png文件转换成更小的8位图像，并带有索引，所有不必要的元数据都将被剥离；npm安装映像-web pack-loader-save-dev rules:[{ test:/。(png|jpg|gif|jpeg)$/，使用:[ { loader: 'file-loader '，选项:{ name: '[name]_[hash:8]。[ext]'，}，}，{ loader: 'image-webpack-loader '，选项:{ mozjpeg: { progressive: true，quality: 65，}，// optipng.enabled: false将禁用optipng optipng: { enabled: false，}，pngquant: { quality: [0.65，0.9]，speed: 4，}，gif sicle:interlaced:false，}，//WEBP选项将启用WEBP webp: { quality: 75，}，}，}，]，}]2 .擦除无用的css可以和通过插件遍历代码一样，识别使用的css类安装插件NPM I Purge CSS-web pack-plugin-d const Purge CSS splash = require(' Purge CSS-web pack-plugin ')；const PATHS = { src:path . join(_ _ dirname，' src ')，}；插件:[New PurgecsPlugin({ paths:glob . sync(` $ { paths . src }/* */* `，{nodir: true})，}] 3 .动态聚合填充什么是聚合填充？Babel只是默认转换新的JavaScript语法(syntax)，比如arrow函数，而不是新的API。例如，迭代器、生成器、集合、映射、代理、反射、符号、承诺等全局对象以及在全局对象上定义的一些方法(如Object.assign)将不会被转码。因此，我们需要polyfill；链接:https://www.jianshu.com/p/4822852792d1官方解释是接受一组浏览器功能的请求，只返回请求浏览器所需的polyfill的服务。 世界上有许多不同的浏览器和版本在使用，每个浏览器都有完全不同的功能集。 这将使浏览器开发成为一项艰巨的任务。 最新版本的流行浏览器可以完成许多旧浏览器无法完成的任务——但你可能仍然需要支持旧浏览器。 通过尝试使用Polyfill重新创建缺失的功能，Polyfill.io使支持不同的浏览器变得更加容易:您可以在支持或不支持的浏览器中使用最新、最强大的功能。 根据caniuse查询，promise具有96.17%的兼容性。image.png，因为Polyfill是不必要的，所以对于少数不支持es6新语法的浏览器，需要加载Polyfill。不需要所有客户都为3加载polyfill。0%的顾客。我们只能通过polyfill服务将所需的polyfill返还给客户。每当客户打开一个页面，浏览器将请求polyfill-service，这将识别客户用户代理。如何使用动态Polyfill服务分发不同的polyfill服务，通过polyfill.io提供的官方服务，自建polyfill服务https://polyfill.io/v3/url-builder/或引入CDN