前端必会的 Webpack 优化技巧

开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第31天，点击查看活动详情

前言

上一篇文章给大家讲解了简单搭建一个 Vuecli，但是只是基本搭建，而没有进行进一步的优化。

而使用 webpack 打包躲不开的就是 webpack 优化这个话题，无论是面试还是实际开发，优化都是非常重要的事情，毕竟提升用户体验是我们前端工程师的职责。

构建时间优化

首先就是构建时间的优化了

thread-loader

多进程打包，可以大大提高构建的速度，使用方法是将t hread-loader 放在比较费时间的 loader 之前，比如 babel-loader。

由于启动项目和打包项目都需要加速，所以配置在 webpack.base.js。

npm i thread-loader -D

// webpack.base.js
{
        test: /\.js$/,
        use: [
          'thread-loader',
          'babel-loader'
        ],
      }
}

cache-loader

缓存资源，提高二次构建的速度，使用方法是将 cache-loader 放在比较费时间的 loader 之前，比如 babel-loader。

由于启动项目和打包项目都需要加速，所以配置在 webpack.base.js。

npm i cache-loader -D

// webpack.base.js
{
        test: /\.js$/,
        use: [
          'cache-loader',
          'thread-loader',
          'babel-loader'
        ],
},

开启热更新

比如你修改了项目中某一个文件，会导致整个项目刷新，这非常耗时间。如果只刷新修改的这个模块，其他保持原状，那将大大提高修改代码的重新构建时间。

只用于开发中，所以配置在 webpack.dev.js。

// webpack.dev.js
//引入webpack
const webpack = require('webpack');
//使用webpack提供的热更新插件
plugins: [
new webpack.HotModuleReplacementPlugin()
],
//最后需要在我们的devserver中配置
 devServer: {
+     hot: true
},

exclude & include

exclude：不需要处理的文件 include：需要处理的文件 合理设置这两个属性，可以大大提高构建速度 在 webpack.base.js 中配置

// webpack.base.js
{
  test: /\.js$/,
  //使用include来指定编译文件夹
  include: path.resolve(__dirname, '../src'),
  //使用exclude排除指定文件夹
  exclude: /node_modules/,
  use: [
    'babel-loader'
  ]
},

构建区分环境

区分环境去构建是非常重要的，我们要明确知道，开发环境时我们需要哪些配置，不需要哪些配置；而最终打包生产环境时又需要哪些配置，不需要哪些配置：

• 开发环境：去除代码压缩、gzip、体积分析等优化的配置，大大提高构建速度
• 生产环境：需要代码压缩、gzip、体积分析等优化的配置，大大降低最终项目打包体积

上篇文章已经带大家进行了环境区分。

提升 webpack 版本

webpack 版本越新，打包的效果肯定更好

打包体积优化

主要是打包后项目整体体积的优化，有利于项目上线后的页面加载速度提升。

本项目已经是 webpack 最新版本。

CSS 代码压缩

CSS代码压缩使用 css-minimizer-webpack-plugin，效果包括压缩、去重。

代码的压缩比较耗时间，所以只用在打包项目时，所以只需要在 webpack.prod.js 中配置。

npm i css-minimizer-webpack-plugin -D

// webpack.prod.js
const CssMinimizerPlugin = require('css-minimizer-webpack-plugin')
optimization: {
  minimizer: [
    new CssMinimizerPlugin(), // 去重压缩css
  ],
}

JS 代码压缩

JS 代码压缩使用 terser-webpack-plugin，实现打包后 JS 代码的压缩。

代码的压缩比较耗时间，所以只用在打包项目时，所以只需要在 webpack.prod.js 中配置。

npm i terser-webpack-plugin -D

// webpack.prod.js
const TerserPlugin = require('terser-webpack-plugin')
optimization: {
  minimizer: [
    new CssMinimizerPlugin(), // 去重压缩css
    new TerserPlugin({ // 压缩JS代码
      terserOptions: {
        compress: {
          drop_console: true, // 去除console
        },
      },
    }), // 压缩JavaScript
  ],
}