Webpack之性能优化篇

Webpack之性能优化篇

性能优化概述

本文所讲的性能优化主要体现在三个方面：

构建性能

这里所说的构建性能，是指在开发阶段的构建性能，而不是生产环境的构建性能;
优化的目标: 降低从打包开始，到代码效果呈现到页面所需要的时间。

传输性能

传输性能是指，打包后的JS代码从服务器传输到用户浏览器经过的时间。

在优化传输性能时要考虑到：

• 总传输量：所有需要传输的文件内容加起来，就是总传输量；
• 文件数量：当访问页面时，需要传输的JS文件数量，文件数量越多，http请求越多，响应速度越慢；
• 浏览器缓存：JS文件会被浏览器缓存，被缓存的文件不会再进行传输；

运行性能

运行性能是指，JS代码在浏览器端的运行速度，它主要取决于我们书写代码质量的高低。

总结

1. 性能优化主要从构建性能、传输性能和运行性能三个方面入手；
2. 性能优化没有完美的解决方案，需要具体情况具体分析；
3. 永远不要过早的关注于性能。因为你在开发的时候，无法完全预知最终的运行性能，过早的关注性能会极大的降低开发效率。

减少模块解析

什么是模块解析

模块解析是Webpack构建过程中的一个关键环节。模块解析包括：抽象语法树分析、依赖分析、模块语法替换

webpack构建过程

不做模块解析会怎样？

• 该模块经过loader处理后的代码就是最终代码。
• 该模块的源码就是最终打包结果的代码。
• 可以缩短构建时间

哪些模块不需要解析？

模块中无其他依赖：一些已经打包好的第三方库，比如jquery

我们通过npm引入jQuery的时候，最终引入的是node_modules/jquery/dist/jquery.js,可以看到，jquery.js文件已经是打包后的代码且代码中没有任何依赖。因此我们在构建过程中不需要再次对它进行模块解析，缩短构建时间。

jquery打包示例

如何让某个模块不要解析？

配置webpack.config.js文件中的module.noParse，它是一个正则，被正则匹配到的模块不会解析。

• ps:平时的项目可能体验不明显，但在大型项目中引入的第三方npm包过多，配置noParse可明显提升构建效率。

// webpack.config.js
module.exports = {
  
    ...
    module: {
  
        noParse: /jquery/
    }
}

优化loader性能

限制loader的应用范围

思路：对于某些库，不使用loader

例如：babel-loader可以将ES6+的语法转换成浏览器兼容的ES5或ES3，可是有些库本身就是用ES5或ES3语法书写的，不需要转换，使用babel-loader反而会浪费构建时间,lodash就是这样的一个库。

• lodash是在ES5之前出现的库，使用的是ES3语法
• 通过module.rule.exclude或module.rule.include，排除或仅包含需要应用loader的场景

module.exports = {
  
    module: {
  
        rules: [
            {
  
                test: /\.js$/,
                exclude: /lodash/,
                use: "babel-loader"
            }
        ]
    }
}

• 如果暴力一点，甚至可以排除掉node_modules目录中的模块，或仅转换src目录的模块

module.exports = {
  
    module: {
  
        rules: [
            {
  
                test: /\.js$/,
                exclude: /node_modules/,
                //或
                // include: /src/,
                use: "babel-loader"
            }
        ]
    }
}

缓存loader的结果（cache-loader）

我们可以基于一种假设：如果某个文件内容不变，经过相同的loader解析后，解析后的结果也不变。cache-loader可以实现这样的功能。

Install

npm install --save-dev cache-loader

webpack.config.js

module.exports = {
  
  module: {
  
    rules: [
      {
  
        test: /\.ext$/,
        use: ['cache-loa