前端必会的Webpack优化技巧

前端工程化是现代 web 开发不可或缺的一部分。而其中用来打包资源的Webpack更是一个必会的技能。然而在使用Webpack的过程中，为了达到最佳性能，我们还需要通过一些优化技巧来优化Webpack的打包过程。本文将介绍前端必会的Webpack优化技巧全攻略

前端工程化是现代 web 开发不可或缺的一部分。而其中用来打包资源的Webpack更是一个必会的技能。然而在使用Webpack的过程中，为了达到最佳性能，我们还需要通过一些优化技巧来优化Webpack的打包过程。本文将介绍前端必会的Webpack优化技巧全攻略。

一、基础优化

1.1 设置webpack.config.js

webpack.config.js 是Webpack打包的配置文件。可以通过对打包输出文件进行优化来提升打包速度。下面是一些基础的优化配置：

• 使用空对象：在开发过程中，我们无需开启任何 optimization 选项，比如 optimization: {}。

• 选择合适的模式：可以指定为开发模式或者生产模式

JS
module.exports = {
mode: 'development', // 'production' || 'development'
}

• 增加 resolve.modules 配置

assets 文件夹中还经常会有 font 或者 svg，这些恐怕只有在测试阶段才有必要引入到项目当中。所以，在正式环境中，可以只保留 src 文件夹，减少文件检索的冗余查找。

javascript
module.exports = {
resolve: {
modules: ['node_modules'], // 只检索 node_modules 文件夹
},
}

1.2 静态资源处理

在应用中引入若干静态资源库，例如 Less / SASS / Stylus、iconfont、Bootstrap、jQuery 等。由此可以开发出完整的模板，使得组件开发更加轻松高效。但是随着时间的推移，这些资源库可能会越来越臃肿，从而导致应用变得越来越慢。因此，对于一些依赖项，您需要只在开发阶段把它们放进来，而不是在应用程序中保留它们。对于生产，可以通过一个脚本（例如，build 脚本）来将所有除应用程序之外的所有内容移除掉。

const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  plugins: [new HtmlWebpackPlugin()],
  performance: {
    hints: process.env.NODE_ENV === 'production' ? 'warning' : false,
  },
};

二、性能优化

2.1 使用 tree shaking 剔除冗余代码

treeshaking是指在程序打包的过程中，基于静态代码分析的技术，获取程序中最终被执行的 JavaScript 代码，去掉程序中未被用到的代码。当应用程序变得越来越大时，这个方式比根据静态分析 HAR 文件移除 JavaScript 或分析代码库所花费的时间小得多。

//webpack.config.js
module.exports={
    mode:"production",
    entry:{
        index:"./src/index.js"
    },
    output:{
        path:path.resolve(__dirname,'dist'),
        filename:'bundle.js'
    },
    optimization:{
        minimize:true
    }
}

2.2 基于缓存的优化

对于一些不变的第三方库，你可以利用缓存机制提升你应用程序的性能。为了实现，你需要在浏览器中缓存你的 vendor.bundled.js 文件，它包含了所有的与外来库的交互。这样，如果第三方库没有发生变化并且有缓存，你就很快就能在第二次加载页面的时候获得主代码包。

2.3 单独拆分 CSS 文件

对于小型应用，当 CSS 文件被加载时，它可以位于 page HTML 页面的 中。但是对于大型应用来说，如果你把应用从一个单一的 HTML 文档中拆分出去（例如使用服务端网页应用程序，或使用某种类似 Vue 的工具把应用编译成 HTML、CSS 和 JavaScript）时，需要一个单独的 CSS 文件。

```
//webpack.config.js
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const path = require('path');

module.exports = {
...
module: {
rules: [
{
test: /.scss$/,
use: [MiniCssExtractPlugin.loader, 'css-loader', 'sass-loader'],
},
],
},
plugins: [new MiniCssExtractPlugin()],
};

### 2.4 使用 compression-webpack-plugin 来压缩成 zip 格式

gzip 是最常见的压缩算法，最常用的提高性能的机制之一。压缩生产包儿所花费的时间是很值得的，因为它可以减少页面加载时间、减少文件传输时间。

//webpack.config.js
const CompressionPlugin = require('compression-webpack-plugin');

module.exports = {
...
performance: {
hints: false,
maxAssetSize: 3000000,
maxEntrypointSize: 6000000,
},
plugins: [
new CompressionPlugin({
test: /.js(\?.*)?$/i,
}),
],
};
```

结语

WebPack 优化不是一件容易的事情。我们需要充分的理解 WebPack 的打包原理，了解其工作流程，在确定问题并深入分析性能调优技巧时充分实践。当你在模块化前端资产时，需要有一个 WebPack 性能优化的计划。理解了 WebPack 相关的性能优化技巧之后，我们的 web 应用程序将展现出很大的改善。