webpack性能优化总结

  

<强>一。缩小文件的搜索范围

  
      <李>优化装载机配置
    使用配置项包括与排除尽可能高概率命中文件,减少webpack匹配文件的时间。
    我们可以适当的配置项目的结构目录。   
     <代码>模块。出口={
      模块:{
      规则:[{
      测试:/\ . js ?/美元,
      包括:路径。解决(__dirname,“应用程序”),
      用途:{
      装载机:‘babel-loader ? cacheDirectory’,
      选择:{
      预设:[“es2015”、“反应”,“0阶段”)
      }
      }
      }),
      },
      } 
      

     webpack性能优化总结

      <李>优化的决心。模块
    指定模块路径,不需要按照默认的方式一层一层查找文件夹,指定模块配置下的应用目录方便在引入其他组件可以以绝对路径引入。引入方式如下截图:
    模块。出口={
    解决:{
    扩展:['。js ', '。jsx '],
    模块:[
    路径。解决(<强>目录名,“应用程序”),
    路径。解决(目录名,node_modules)
    ]
    }
    }
     webpack性能优化总结”> <br/> ReactEcharts是npm安装的模块,输入是自己写在公共组件组件的文件夹,由于组件在应用程序文件夹下<br/>根据配置,可以直接以此种方式引入。</李>
  <李>优化的决心。扩展<br/>此配置项默认配置为:<br/>扩展:[' js ', ' json '] <br/>如果这个数组列表越长,或者正确的后缀越往后,就会造成尝试的次数越多,所以解决。扩展尽量减少后缀尝试的可能性。建立配置为:<br/>扩展:[' js '], </李>
  </ol>
  <p> <强>二。使用DLLPLUGIN </强> <br/>为什么web项目构建介入动态连接库的思想后,会大大提升构建速度呢?原因在于,包含大量复用模块的动态链接库只需被编译一次,在之后的构建过程中被动态链接库包含的模块将不会被重新编译,而是直接使用动态连接库中的代码。要给web项目构建接入动态链接库的思想,需要完成以下事情。</p>
  <ul>
  <李>将网页依赖的基础模块抽离出来,打包成一个个单独的动态链接库中。在一个动态链接库中可以包含多个模块。</李>
  <李>当需要导入的模块存在于某个动态链接库,这个模块不能再次打包,而是去动态链接库中去获取。</李>
  <李>页面依赖的所有动态链接库都需要被加载。<br/>下面以反应项目为例。<br/> webpack已经内置了对动态链接库的插件Dllplugin以及DllReferencePlugin <br/>首先看构建成功之后的目录结构<br/> <img src=webpack性能优化总结