webpack教程（webpack调优技巧）

webpack优化主要有三个方面：1.提高构建速度    
    
    
 ，2.减少打包体积 


     


     


     ，3.优化用户体验

提高构建速度：

启用多线程

thread-loader

使用thread-loader插件可以启用多线程进行构建
    
    
    
。

使用缓存

cache-loader

使用cache-loader插件可以对构建进行缓存

 




 




 




，加快后续的构建速度     


     


     


 。

热更新

热更新只更新改动的代码文件   

   

   

，无需编译整个项目 




 




 




 。

exclude&include

exclude选项是构建时忽略的文件  

     

     

     ，include选项是构建时需要构建的文件

   

   

   

。配置好exclude和include


  




  




  



，可以避免对不必要的文件进行构建     

     

     

。

减少打包体积

压缩css代码

css-minimizer-webpack-plugin

压缩js代码

terser-webpack-plugin

tree-shaking

tree-shaking就是只编译需要的代码  




  




  




  。

webpack5该特性默认启用


  


  


  

。

source-map

source-map帮助在源代码中定位bug     
     
     
。

开发模式使用更精确但体积更大的source-map module.exports = { mode: development, devtool: eval-cheap-module-source-map }

生产模式使用体积小但不那么精确的source-map

module.exports = { mode: production, devtool: nosources-source-map

} 打包分析

webpack-bundle-analyzer插件可以看到各个文件的打包大小  


  


  


，帮助对对应的文件进行优化

优化用户体验

延迟加载模块

在vue中   
     
     
    ，用下面箭头函数的方式引入模块



   




   




   


，就可以按需加载模块   




   




   




  。react的延迟加载和vue类似 



 



 



，angular也有自己的延迟加载方式



 



 



 

。 // src/router/index.js const routes = [ { path: /login, name: login, component: login }, { path: /home, name: home, // lazy-load component: () => import(../views/home/home.vue), }, ]

Gzip

最常见的压缩文件的算法               。可以在网络传输中压缩数据                 ，加快传输速度    




    




    




  。需要后端的配合
















。

插件 compression-webpack-plugin

base64

小图片可以转成base64嵌进代码中




    




    




    

，减少http请求数量               。

插件 asset-module

hash

如下配置可以给打包文件加上hash后缀














，生成hash后缀管理浏览器缓存     



     



     



  。只要文件名和之前不同                 ，浏览器就会向服务端重新请求文件















。反之



     



     



     
，浏览器会从协商缓存中读取文件
    
    
    
。重新部署了项目















，文件名称未修改    
    
    
 ，客户端不一定能获取到最新的代码     


     


     


 。

webpack会自动更改有改动的打包文件的hash后缀 


     


     


     ，可以自动实现文件的缓存管理 




 




 




 。 output: { path: path.resolve(__dirname, ../dist), filename: js/chunk-[contenthash].js, clean: true, },