webpack常用配置优化

2020-10-14 本文已影响0人 wenronnie

说到优化，首先肯定要通过一些分析工具找出项目存在的问题，然后针对问题来做对应的优化。
webpack优化分为两个方向：
1.构建速度层面优化
安装打包耗时分析插件：

npm install --save-dev speed-measure-webpack-plugin
使用方法：
// 导入速度分析插件
const SpeedMeasurePlugin = require("speed-measure-webpack-plugin");
// 实例化插件
const smp = new SpeedMeasurePlugin();
//调用wrap方法，传入webpack配置对象
smp.wrap({
        plugins: []
    })

2.代码输出质量优化
安装打包体积分析插件：

npm install --save-dev webpack-bundle-analyzer
// 导入体积分析插件
const BundleAnalyzerPlugin = require("webpack-bundle-analyzer").BundleAnalyzerPlugin;
plugins: [
    // 实例化体积分析插件
    new BundleAnalyzerPlugin()
 ]
//执行打包命令之后，本地http://127.0.0.1:8888/页面可查看打包后体积分布

构建速度层面优化：

1.缩小打包作用域

1.1 test/exclude/include 确定loader规则范围
1.2 resolve.modules 默认值为['node_modules'],含义是先去当前目录的node_modules下去找模块，没有找到就去上一级../node_modules中找，当第三方模块的路径确定时，可以指定其绝对路径，以减少寻找。

module.exports={
  resolve:{
    modules:[path.resolve(__dirname,'node_modules')]
  }
}

1.3 resolve.mainFields
当webpack的target属性设置为 webworker, web 或者没有指定，默认值为：

mainFields: ["browser", "module", "main"]

对于其他任意的 target（包括 node），默认值为：

mainFields: ["module", "main"]

为了减少搜索步骤，如果你使用到的第三方模块的入口文件描述字段都是main时，可以把mainFields设为['main']
1.4 alias 配置别名
通过配置别名来将原导入路径映射成一个新的导入路径,例如一些庞大的第三方模块，可以用别名指定其公共文件，从而跳过耗时的递归解析操作。
1.5 resolve.extensions 尽可能减少后缀尝试的可能性
在源码的导入时，也尽可能带上后缀，避免寻找过程
1.6 noParse 对完全不需要解析的库进行忽略
防止 webpack 解析那些任何与给定正则表达式相匹配的文件。忽略的文件中不应该含有 import, require, define 的调用，或任何其他导入机制。忽略大型的 library 可以提高构建性能
1.7 预编译资源模块
DllPlugin结合DllReferencePlugin
或者：
hard-source-webpack-plugin ,配置简单，推荐使用
把复用性较高的第三方模块打包到动态链接库中，在不升级这些库的情况下，动态库不需要重新打包，每次构建只重新打包业务代码

2.多进程构建

2.1 thread-loader插件
webpack 是单线程模型的，所以webpack 需要一个一个地处理任务，不能同时处理多个任务。
thread-loader会将你的 loader 放置在一个 worker 池里面运行，以达到多线程构建。
2.2 多进程并行压缩代码
webpack默认提供了UglifyJS插件来压缩JS代码，但是它使用的是单线程压缩代码，也就是说多个js文件需要被压缩，它需要一个个文件进行压缩
目前有三种主流的多进程压缩方案：
parallel-uglify-plugin
uglifyjs-webpack-plugin
terser-webpack-plugin
这些插件能开启多个子进程，把对多个文件压缩的工作分别给多个子进程去完成，但是每个子进程还是通过UglifyJS去压缩代码。无非就是变成了并行处理该压缩了，并行处理多个子任务，效率会更加的提高

3.充分利用缓存

3.1 cache-loader

代码输出质量优化

1. 用 webpack 实现 CDN 的接入

静态资源的导入 URL 需要变成指向 CDN 服务的绝对路径的 URL 而不是相对于 HTML 文件的 URL。
静态资源的文件名称需要带上有文件内容算出来的 Hash 值，以防止被缓存。
不同类型的资源放到不同域名的 CDN 服务上去，以防止资源的并行加载被阻塞。
web-webpack-plugin 单页面应用生成 HTML 文件
extract-text-webpack-plugin

2. 多入口项目提取公共代码

SplitChunksPlugin 进行(公共脚本、基础包、页面公共文件)分离(Webpack4内置)

3. 按需加载

webpack支持两种动态代码拆分技术：

import()语法,用import引入的模块以及其子模块会被分割打包成一个独立的chunk
传统的require.ensure

4. 使用tree shaking

tree shaking是一个术语，通常用于描述移除 JavaScript 上下文中的未引用代码(dead-code)。它依赖于 ES2015 模块系统中的静态结构特性，例如 import和 export
使用：

使用 ES2015 模块语法（即 import 和 export）。
导入模块副作用的设置，在项目 package.json 文件中，添加一个 sideEffects入口，或者在module.rules配置选项中设置 sideEffects。
引入一个能够删除未引用代码(dead code)的压缩工具(minifier)（例如 UglifyJSPlugin）。

5. 动态 Polyfill 服务

babel-polyfill由于是一次性全部导入整个polyfill，所以用起来很方便，但与此同时也带来了一个大问题：文件很大
动态 polyfill 指的是根据不同的浏览器，动态载入需要的 polyfill。 Polyfill.io 通过尝试使用 polyfill 重新创建缺少的功能，可以更轻松地支持不同的浏览器，并且可以大幅度的减少构建体积。

使用方法：在 index.html 中引入如下 script 标签
<script crossorigin="anonymous" src="https://polyfill.io/v3/polyfill.min.js"></script>

6. 启用Scope Hoisting

Scope hoisting（作用域提升）,即让webpack 会把引入的 js 文件“提升到”它的引入者顶部。
Scope Hoisting 可以让 Webpack 打包出来的代码文件更小、运行的更快。

Webpack 内置的功能，只需要配置一个插件
plugins: [new webpack.optimize.ModuleConcatenationPlugin()]