webpack调优技巧

1.提高构建速度：
thread-loader
启用多线程

cache-loader
使用缓存

热更新

配置exclude&include

2.减少打包体积
压缩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插件可以看到各个文件的打包大小，帮助对对应的文件进行优化

3.优化用户体验
延迟加载模块

// 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

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