webpack构建速度的优化基本完成，接下来要考虑的是在线代码质量的优化，即如何使用Webpack构建高质量的代码

Webpack构造过程：初始化配置参数-绑定事件钩子回调-确定要逐个遍历的条目-用加载器编译文件-输出文件

概述

这种优化构建了代码质量的基本技术：

按需重新配置负载；常用代码提取和代码压缩；CDN接入；打开gzip压缩；访问treeShaking，拒绝无用代码，打开Scope Hoisting实时查看每次配置后的代码构建情况，使用Webpack监控文件避免每次手动构建，打开webpack-jarvis实时查看构建分析，npm i -D webpack-jarvis。

打开监控模式

Watch:为真，watchoptions : {忽略了：/node _ modules/，//忽略监听文件aggregateTimeout: 300，//文件更改后构建Poll3360 1000需要多长时间，//每秒的查询次数尽可能少}首先，react-router4实现按需加载

按需加载单页应用程序的一般原则：

将网站划分为小功能，并根据每个功能的相关性将其分为几类；不要将任何类组合成一个块，并根据需要加载相应的代码；用户第一次进入网站需要看到的对应功能Chunk无法按需加载。分码的加载需要一定的触发机会，即当用户操作或即将操作相应的功能时，会再次加载相应的代码(默认情况下，使用react-router按需加载的触发条件是路由的改变)

实施条件：

使用插件：NPM I react-loaded；

配合bable插件NPM I @ Babel/plugin-语法-动态-导入；

代码示例：

//.bable RC { ' plugins ' : [' @ babel/plugin-语法-dynamic-import ']}//示例代码可加载({loader : ()=import('。/component ')，//加载组件加载：按需加载，//处理组件加载的加载和错误等。delay: 300 //延迟加载以避免加载的闪烁问题})；//Loading组件定义//接受三个道具，其中pastDelay:等待时触发；TimedOut:触发过度延迟；当超时发生时；错误：错误触发器默认为200毫秒常量加载=({过去的延迟，超时，错误})={ if (pastDelay) {返回自旋旋转提示=' Loadding . 'div style={ { height : 300 } }//Spin } else if(time dout){ return Spin Spin tip='耗时较长.'div style={ { height : 300 } }//Spin } else if(错误){ return divError！/div；}返回null};第二，提取公共代码webpack.optimization

optimization : { splitchunk s 3360 { chunk s : ' all }，cachegroups 3360 { vendors : { test :/node _ modules/，name: ' vendors '，Minsize : 0 0，minchunks : 1，chunks :' initial '，priority : 2//此配置项设置处理的优先级，值越大，优先级越高}，commons 3360 {name 3360压缩文件JS

启用多线程并行压缩JS与NPM I-d网络包-并行-丑化-插件

optimization : { minimize r :[new parallel glifyplugin({ cachedir 3360 })。缓存/'，//缓存压缩，默认不缓存，将存储位置设置为open test: /。js$/，//匹配要压缩的文件。默认值为/。js$/与Loader配置//include: []相同，使用正则性选择要压缩的文件与Loader配置//exclude3360 []相同，使用正则性删除不要压缩的文件与Loader配置///workerCount:相同2、打开几个子进程并发执行压缩。//sourceMap: false，是否输出源Map，打开会导致压缩变慢。//uglifyJS: {}，用于压缩的ES6代码不能和uglifyJS:一起使用{//ES5代码output 3360 {//是否输出可读性强的代码，即空格和制表符会被保留，默认为输出。为了达到更好的压缩效果，可以将其设置为false beautify: false。//是否保留代码中的注释是默认保留的。为了更好的压缩效果，可以设置为false comments : false}，compression 3360 {//UglifyJS删除未使用的代码时是否输出警告信息默认输出为warnings: false。//是否删除代码中所有控制台语句，默认不删除。打开后，所有console语句drop _ console: true将被删除。//是否嵌入已经定义但只使用一次的变量，如var x=1；Y=x，转换为y=1，默认值为no collapse _ vars:true。//提取静态值reduce _ vars:true } }，})，]}，提取并压缩Css

使用插件：优化-CSS-资产-网络包-插件，迷你-CSS-提取-插件

使用示例：

//将css提取到一个单独的文件const minisextract plugin=require(' mini-CSS-extract-plugin ')；//optimizer splugin CSS文件压缩插件const optimizer splugin=require(' optimize-CSS-assets-web pack-plugin ')；const extracts=new minissextractplugin({ filename : ' CSS/[name])。[contenthash:8]。css '，chunkfilename : ' CSS/[name]_[contenthash :8]。css '，fall back : ' style-loader ' })；plugins :[new optimizer splugin({ assetnameregexp :/)。css$/g，csprocessor : require(' cssnao ')，CSProcessOperations 3360 {丢弃注释： {全部删除： True}}，CanPrint : True})，] Webpack被配置为访问CDN

加拿大

网站访问CDN时，需要将网页的静态资源上传到CDN服务器，使用CDN地址进行访问；

使用CDN可以解决资源并行下载限制，处理静态资源Cookie和域名携带问题；

CDN缓存和返回源需要合理设置静态资源。对CDN的哈希访问将引入多个域名，增加域名解析时间，并预解析域名linkrel=' DNS-prefetch ' href='//js . DNS.com ' rel=' external nofollow '/

Webpack支持访问

Output.publicPath在WebPlugin.stylePublicPath//javascriptoutput3360 { public path 3360 '/Js.cdn.com/js/',路径： path }中设置JavaScript地址css-loader.publicPath设置css文件地址。联接(_ _ dirname，'./docs/dist ')，//打包文件存放位置//使用‘chunk hash’(chunk hash:根据模块内容变化；Hash:随机)文件名：' js/[name]。[区块哈希33608]。js '，区块文件名3360' js/[name]-[id]。[区块哈希33608]。js '，}根据每个构造，并开始gzip压缩

使用插件：NPM一维压缩-网络包-插件；

Webpack配置

const compression plugin=require(' compression-web pack-plugin ')；插件：[新的压缩插件({文件名： '[路径])。gz [query]'，//目标资源名称。[文件]将被替换为原始资源。[path]将被替换为原始资源路径，[query]将被替换为原始查询字符串algorithm: 'gzip '，//algorithm test3360/。(js | CSS) $/，//压缩js和css threshold: 10240，///只处理大于这个值的资源。计算最小比率： 0.8//以字节为单位//仅处理压缩比小于此值的资源})]在后台开始使用koa

const static cache=require(' KOA-static-cache ')；从“”导入配置。/configs '；const app=new Koa()；使用app。使用(静态缓存(路径。resolve (_ _ dirname '，/dist ')，{maxage: 7 * 24 * 60 * 60，gzip: true，//打开dynamic: true，})来访问treeShaking并拒绝无用的代码

抖树可以用来寻找有用的代码，去掉JavaScript中没有用到的死代码；但这取决于ES6静态花模块语法导入导出的导入和导出

Webpack访问

修改。babelrc保留的ES6模块语句

注意新版本的巴别塔-预置-env，已经预置了巴别塔-预置-es2015。巴别塔建议使用巴别塔-预置-env代替巴别塔-预置-es2015，如果继续使用巴别塔-预置-es2015将会发出警告信息。

{ '预设' : [ ['env '，{ 'modules': false }]，' plugins': ['语法-动态-导入']}

网络包-展示-使用-导出运行构建带-展示-使用-导出可以跟踪树摇动工作；

Webpack只能正确分析如何消除死代码，需要访问UglifyJs来处理消除(配置见上文)

开放范围选择

范围延迟意味着范围提升；

在构建过程中，webpack会利用ES6模块化的静态特性，确定模块之间的依赖关系，将一个捆绑包中的静态依赖提升到顶层。(所以你需要配置Babel来打开ES6模块化，就像访问treeShaking一样。)

原理：分析模块之间的依赖关系，在不造成代码冗余的前提下，尽可能将分散的模块合并成一个函数，这样只有引用过一次的模块才能合并。

获取福利：

代码量减少

当代码运行时，由于创建的函数的范围更小，内存开销也减少了

网络包访问模块链接插件的内置插件

const Modulecocatplugin=require(' web pack/lib/optimize/Modulecocationplugin ')；plugins :[new module catplugin()，//开放范围提升]，这是本文的全部内容。希望对大家的学习有帮助，支持我们。