webpack调优技巧

  • webpack调优技巧已关闭评论
  • 162 次浏览
  • A+
所属分类:Web前端
摘要

webpack优化主要有三个方面:1.提高构建速度,2.减少打包体积,3.优化用户体验

webpack优化主要有三个方面:1.提高构建速度,2.减少打包体积,3.优化用户体验

提高构建速度:

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

  2. 使用缓存
    cache-loader
    使用cache-loader插件可以对构建进行缓存,加快后续的构建速度。

  3. 热更新
    热更新只更新改动的代码文件,无需编译整个项目。

  4. exclude&include
    exclude选项是构建时忽略的文件,include选项是构建时需要构建的文件。配置好exclude和include,可以避免对不必要的文件进行构建。

减少打包体积

  1. 压缩css代码
    css-minimizer-webpack-plugin

  2. 压缩js代码
    terser-webpack-plugin

  3. tree-shaking
    tree-shaking就是只编译需要的代码。
    webpack5该特性默认启用。

  4. 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' } 
  1. 打包分析
    webpack-bundle-analyzer插件可以看到各个文件的打包大小,帮助对对应的文件进行优化

优化用户体验

  1. 延迟加载模块
    在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'),   }, ] 
  1. Gzip
    最常见的压缩文件的算法。可以在网络传输中压缩数据,加快传输速度。需要后端的配合。
    插件 compression-webpack-plugin

  2. base64
    小图片可以转成base64嵌进代码中,减少http请求数量。
    插件 asset-module

  3. hash
    如下配置可以给打包文件加上hash后缀,生成hash后缀管理浏览器缓存。只要文件名和之前不同,浏览器就会向服务端重新请求文件。反之,浏览器会从协商缓存中读取文件。重新部署了项目,文件名称未修改,客户端不一定能获取到最新的代码。
    webpack会自动更改有改动的打包文件的hash后缀,可以自动实现文件的缓存管理。

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