呆小徐

# 前言

在大家的日常开发中，特别是开发大型项目，大家有没有每次打包想要骂娘的冲动！反正我是很痛苦，每次打包20分钟起，这漫长的等待时间，让人非常焦虑，遇见一些特殊问题（比如测试微信分享），必须要打包部署，看效果，你会发现，一天时间全部浪费在打包上，真所谓改代码两分钟，打包代码两小时，于是闲暇之余，研究了一下webpck打包机制，并且通过几个小插件和一些技巧成功的减少公司项目的打包时间，虽然打包时间没有断崖式的减少，但是能少一分钟，是一分钟吧，下面我们一起来研究一下webpack的性能优化，以及体积优化！

# 1、提升基础环境版本

在项目中，如果发现脚手架打包缓慢，体积又臭又大，那么，升级技术环境是提升的最快方式，比如node环境，比如升级脚手架版本，效果会有显著提升，而且是最廉价的优化方式。

# 2、使用include或者exclude配置，来避免重复打包

在我们的日常开发中，我们引入的一些插件，类库，都是被打包过了的，那么我们用babel去做编译的时候，就需要配置一下，给已经编译过的语法剔除掉，这样就能减少打包时间，在此，科普一下，我们在使用插件的时候webpack是怎么做的，比如我们在项目中去引入jq插件

import $ from 'jquery'

首先当我们取用esmodel去引用jquery的时候，npm搜索会先从当前目录的node_modules中找，找不到。就往上一级目录找node_modules，一直往上找到当前磁盘。如果都没有，才报错。当找到node_modules包之后他回去找package.json文件，在文件中确入口文件，然后找到入口文件去加载，当加载后发现他其实已经是一个已经编译过的文件了

jquery包文件信息

确定入口

jquery构建文件

如上图，这是一个编译过的es5的代码，因为你可以看到熟悉的原型对象，那我我们应该怎么使用include，或者exclude,比如我们配置webpack的时候我们在babel-loader中去配置：

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

当然还能使用noParse指定文件，避免重复打包

# 3、合理的利用缓存来减少打包时间

还拿这个babel-loader来举例

{
    test: /\.js$/,
    use: [{
        //如果文件没被改动则使用缓存
        loader: 'babel-loader?chaheDirectory'
    }]
}

所以，我们一些公用不改动的库，就是可使用当前方式去打包，除了有这个技巧呢，还有个cache-loader，也能开启缓存，用法非常简单，在开销较大的loader前使用即可。

{
    test: /\.js$/,
    use: [
        'cache-loader',
        'babel-loader'
    ],
    include: path.resolve('src')
}

# 4、合理的使用plugin，减少打包时间和体积

在我们搭建webpack脚手架的时候，我们会发现必须要使用一些plugin才能实现我们的需求，那我们应该怎么选择呢？

  • 首先我们尽量选择官方推荐的plugin，这些插件经过了官方的测试又可靠的性能
  • 其次合理的使用这些插件，避免出现引入无用模块和代码

举一些例子，比如在我们使用moment的库的时候，在打包的手webpack默认会给整个库都引入进来，这样就会导致我们的库非常大，我们可以使用IgonrePlugin忽略插件的某个无用的文件夹，这样就能大大的减少打包体积，在比如，我们在使用压缩css的OptimizeCSSAssetsPlugin的时候只需要在生产环境下对代码做压缩，那么我们在开发环境下就不需要这个插件，这样就能有效的缩短压缩时间

# 5、合理配置relosve，防止减慢打包时间

我们在平常引入es6模块的时候，发现不用写文件后缀也能引用进来，其实，这就是webpack的relosve配置参数给我们提供的便利

//这样配置我们就不用写后缀了
resolve:{
    extensions:['js','jsx']
}

但是正由于这样的便利，大家为了方便，就会配置许多后缀，比如jpg、css、png 等，由于不写后缀，他在查找的时候，会给 extensions数组中的所有后缀遍历完了找不到才去报错，这样就大大增加了查找时间，所以，大家还是要合理配置

# 6、启用多进程打包（重点有坑）

开启多进程打包主要有三个方法，使用happypack和使用thread-loader，

happypack

happypack本身就是对node开启了一个多进程打包，用法有点麻烦

//首先引入happypack
const HappyPack = require('happypack')
//然后在lorder中使用即可，以babel-lorder为例
 {
    test: /\.js$/,
    // 对 .js 文件的处理转交给 id 为 babel 的 HappyPack 实例
    use: ['happypack/loader?id=babel'],
    include: srcPath,
    // exclude: /node_modules/
}

//需要在plugins中使用HappyPack
// happyPack 开启多进程打包
new HappyPack({
    // 用唯一的标识符 id 来代表当前的 HappyPack 是用来处理一类特定的文件
    id: 'babel',
    // 处理 .js 文件，用法和 Loader 配置中一样，也能开启缓存
    loaders: ['babel-loader?cacheDirectory']
}),

注意：当然由于webpack4中官方文档的极力推荐thread-loader，并且HappyPack将不再被维护，所以当我们使用多进程打包时首选thread-loader

thread-loader

thread-loader 使用起来也非常简单，只要把 thread-loader 放置在其他 loader 之前即可，这样一来，按照官方的解释之后的 loader 就会在一个单独的 worker 池(worker pool)中运行，并且还支持之定义配置，方便性能优化

{
    test: /\.js$/,
    exclude: /node_modules/,
    // 创建一个 js worker 池
    use: [
        //直接在loader之前使用
        'thread-loader',
        'babel-loader'
    ]
},

//自定义配置行
use: [
    {
        loader: "thread-loader",
        // 设置同样option的loaders会共享
        options: {
        // worker的数量，默认是cpu核心数
        workers: 2,
        // 一个worker并行的job数量，默认为20
        workerParallelJobs: 50,
        // 添加额外的node js 参数
        workerNodeArgs: ['--max-old-space-size=1024'],
        // 允许重新生成一个dead work pool
        // 这个过程会降低整体编译速度
        // 开发环境应该设置为false
        poolRespawn: false,
        //空闲多少秒后，干掉work 进程
        // 默认是500ms
        // 当处于监听模式下，可以设置为无限大，让worker一直存在
        poolTimeout: 2000,
        // pool 分配给workder的job数量
        // 默认是200
        // 设置的越低效率会更低，但是job分布会更均匀
        poolParallelJobs: 50,
        }
    },
    'babel-loader'
]

ParallelUglifyPlugin

我们知道压缩 JS 需要先将代码解析成 AST 语法树，然后需要根据复杂的规则去分析和处理 AST，最后将 AST 还原成 JS，这个过程涉及到大量计算，因此比较耗时，那么我们使用ParallelUglifyPlugin这个插件就能开启多进程压缩JS使用方式也非常简单

//引入插件
const ParallelUglifyPlugin = require('webpack-parallel-uglify-plugin')

plugins: [
    // 使用 ParallelUglifyPlugin 并行压缩输出的 JS 代码
    new ParallelUglifyPlugin({
        // 传递给 UglifyJS 的参数
        // （还是使用 UglifyJS 压缩，只不过帮助开启了多进程）
        uglifyJS: {
            output: {
                beautify: false, // 最紧凑的输出
                comments: false, // 删除所有的注释
            },
            compress: {
                // 删除所有的 `console` 语句，可以兼容ie浏览器
                drop_console: true,
                // 内嵌定义了但是只用到一次的变量
                collapse_vars: true,
                // 提取出出现多次但是没有定义成变量去引用的静态值
                reduce_vars: true,
            }
        }
    })
]

基本我们的多进程的优化到这里了，之所以说有坑，是由于好多人配置以后发现打包时间不但没有加快反而慢了，这是由于如果项目较小，打包开启多进程会有额外的性能开销，反而将时间拖慢了，所以，在这里如果项目较大，那么我们推荐使用，如果项目较小，还是算了，杀鸡焉能用牛刀。

# 7、开发中使用热更新替换自动刷新

我们在日常开发中，由于每次改完代码都要刷新页面，但是如果项目体积过大，没事刷新就得喝几口水，才能出来，那是相当痛苦。

其实我们可以使用热更新，来代替自动刷新，来提高开发体验，不要问我为什么，我体验过，那种每次改代码就要等十秒的感觉，那么热更新应该怎么使用呢？同样也非常简单引入插件即可

//引入webpack
const webpack = require('webpack');

//使用webpack提供的热更新插件
plugins: [
   new webpack.HotModuleReplacementPlugin()
],
//最后需要在我们的devserver中配置
devServer: {
    hot: true
},

# 8、使用DllPlugin插件，优化提高打包时间

当我们使用一些社区的比较稳定的库的时候，比如react、vue，jquery，你会发现他几个月都不会更新一次，那么，我们就不需要重复打包了，只需要打包一次，下次打包只引用即可，那我应该怎么做呢，其实在webpack4的版本中，已经集成DllPlugin插件，我们只需要配置即可。

// 首先第一步我们要编写一个dll的配置文件，去打包dll文件

const path = require('path')
const DllPlugin = require('webpack/lib/DllPlugin')
const { srcPath, distPath } = require('./paths')

module.exports = {
  mode: 'development',
  // JS 执行入口文件
  entry: {
    // 以 React为例 模块的放到一个单独的动态链接库
    react: ['react', 'react-dom']
  },
  output: {
    // 输出的动态链接库的文件名称，[name] 代表当前动态链接库的名称，
    // 也就是 entry 中配置的 react 和 polyfill
    filename: '[name].dll.js',
    // 输出的文件都放到 dist 目录下
    path: distPath,
    // 存放动态链接库的全局变量名称，例如对应 react 来说就是 _dll_react
    // 之所以在前面加上 _dll_ 是为了防止全局变量冲突
    library: '_dll_[name]',
  },
  plugins: [
    // 接入 DllPlugin
    new DllPlugin({
      // 动态链接库的全局变量名称，需要和 output.library 中保持一致
      // 该字段的值也就是输出的 manifest.json 文件 中 name 字段的值
      // 例如 react.manifest.json 中就有 "name": "_dll_react"
      name: '_dll_[name]',
      // 描述动态链接库的 manifest.json 文件输出时的文件名称
      path: path.join(distPath, '[name].manifest.json'),
    }),
  ],
}

// 第二步在webpack中配置映射关系，防止打包时再次引用npm包

// 第一，引入 DllReferencePlugin
const DllReferencePlugin = require('webpack/lib/DllReferencePlugin');
plugins: [
//告诉 Webpack 使用了哪些动态链接库
    new DllReferencePlugin({
        // 描述 react 动态链接库的文件内容
        manifest: require(path.join(distPath, 'react.manifest.json')),
    }),
]

第三步在我们的html中引用打包的公用模块，因为当我们在配置DllReferencePlugin的时候，他底层其实是在执行的时候在window中去寻找这个包，所以必须引入进来打包后的这个文件，那么相应的这个公用模块也会在window下挂一个全局变量，引入方式我们可以使用AddAssetHtmlWebpackPlugin插件引入，也可以手动引入

以上就可以大幅提高打包时间，但是由于dllPlugin的使用是为了解决开发时的打包时间缓慢问题，在线上环境时，建议还是不要使用，统一原流程打包即可

# 9、一些项目体积以及运行时的性能优化

部分代码使用懒加载，加快首屏加载时间

懒加载是老生常谈的问题了，这是性能优化的必要手段，当页面中的大型，并且不太重要的代码，我们就可以使用懒加载的方式去异步加载进来，这样便可以提前达到渲染条件，具体懒加载怎么使用：

import('./util.js').then(data=>{  //  懒加载
    console.log(data.default)  //拿到加载的文件里面的数据信息  输出到控制台上
})

小图片使用base64格式，不使用用网络请求

在我们打包时，如果遇见小型图片，我们可以直接转换成base64位格式，减少http请求就能达到前端性能优化的目的，使用方式非常简单

rules: [
    // 图片 - 考虑 base64 编码的情况
    {
        test: /\.(png|jpg|jpeg|gif)$/,
        use: {
            loader: 'url-loader',
            options: {
                // 小于 5kb 的图片用 base64 格式产出
                // 否则，依然延用 file-loader 的形式，产出 url 格式
                limit: 5 * 1024,
                // 打包到 img 目录下
                outputPath: '/img1/',
                // 设置图片的 cdn 地址（也可以统一在外面的 output 中设置，那将作用于所有静态资源）
                // publicPath: 'http://cdn.abc.com'
            }
        }
    },
]

打包时合理使用hash，如果没改动的文件，命中缓存

当我们在打包时，使用hash计算文件变动，如果文件被改变，则hash的值改变，在上线后，浏览器访问时没有改变的文件会命中缓存，从而达到性能优化的目的，使用方式如下：

output: {
    filename: 'bundle.[contentHash:8].js',  // 打包代码时，加上 hash 后缀
    path: distPath
},

提取公用代码，代码分割

当我们在打包时，提取公用代码，并且实现代码分割，那么我便可以提取多个模块的公共代码，只需要打包一次，这样我们便能实现更小的代码体积！怎么使用呢，webpack给我们提供了optimization属性，去配置

optimization: {
    // 分割代码块
    splitChunks: {
        chunks: "async", //默认作用于异步chunk，值为all/initial/async/function(chunk),值为function时第一个参数为遍历所有入口chunk时的chunk模块，chunk._modules为chunk所有依赖的模块，通过chunk的名字和所有依赖模块的resource可以自由配置,会抽取所有满足条件chunk的公有模块，以及模块的所有依赖模块，包括css
        minSize: 30000,  //表示在压缩前的最小模块大小,默认值是30kb
        minChunks: 1,  // 表示被引用次数，默认为1；
        maxAsyncRequests: 5,  //所有异步请求不得超过5个
        maxInitialRequests: 3,  //初始话并行请求不得超过3个
        automaticNameDelimiter:'~',//名称分隔符，默认是~
        name: true,  //打包后的名称，默认是chunk的名字通过分隔符（默认是～）分隔
        cacheGroups: { //设置缓存组用来抽取满足不同规则的chunk,下面以生成common为例
            common: {
                name: 'common',  //抽取的chunk的名字
                chunks(chunk) { //同外层的参数配置，覆盖外层的chunks，以chunk为维度进行抽取
                },
                test(module, chunks) {  //可以为字符串，正则表达式，函数，以module为维度进行抽取，只要是满足条件的module都会被抽取到该common的chunk中，为函数时第一个参数是遍历到的每一个模块，第二个参数是每一个引用到该模块的chunks数组。自己尝试过程中发现不能提取出css，待进一步验证。
                },
                priority: 10,  //优先级，一个chunk很可能满足多个缓存组，会被抽取到优先级高的缓存组中
                minChunks: 2,  //最少被几个chunk引用
                reuseExistingChunk: true，//  如果该chunk中引用了已经被抽取的chunk，直接引用该chunk，不会重复打包代码
                enforce: true  // 如果cacheGroup中没有设置minSize，则据此判断是否使用上层的minSize，true：则使用0，false：使用上层minSize
            }
        }
    }
}

使用 tree-shaking 去除无用代码减少代码体积

tree-shaking 的目的就是去除被引用但是没有被使用的代码，在webpack4中，如果一个文件中引用多个函数，却使用一个函数，那么多个函数都会被打包，据说webpack5中，能解析出更强大的依赖图谱，去除最终没有被使用的代码

// a.js
export const a = 'a';
export const b = 'b';

// b.js
import * as c from "./a";
export { c };

// index.js
import * as module from "./b";
console.log(module.c.a);

比如上述代码最终是这个b变量是不会被打包的，说了半天怎么开启呢?

mode: 'production',

一句代码，配置mode即可

文章引用链接地址：webpack优化 (opens new window)

← Git常用命令 →