Webpack4不求人(3) ——性能优化

2020年3月6日 · 335 字 · 2 分钟

限定Webpack处理文件范围

项目比较小的情况下Webpack的性能问题几乎可以忽略,但是一旦项目复杂度上升,Webpack会有额外的性能损失需要我们进行优化。

通过前面内容的学习我们可以知道Webpack主要干下面这些事情:

  1. 通过entry指定的入口脚本进行依赖解析。
  2. 找到文件后通过配置的loader对其进行处理。

因此,我们可以从这方面入手进行优化,减少Webpack搜索文件的范围,减少不必要的处理。

loader配置

在之前的内容中介绍过loader可以使用test、include、exclude配置项来匹配需要Loader处理的文件,因此推荐给每个loader定义test之后还定义include或exclude。

module.exports = {
  module:{
  	rules:[
      {
        test:/\.js$/,
        use:'babel-loader',
        include: path.resolve(__dirname, 'src'), // 只处理src目录下的js文件
      }
    ]
  }
};

resolve.extensions配置

导入未添加扩展名的模块时,Webpack会通过resolve.extensions后缀去检查文件是否存在。由于resolve.extensions是一个数组,如果数组项比较多,正确的后缀放置得越靠后,Webpack尝试次数就会越多,影响到性能。

因此配置resolve.extensions时需要遵守以下规则:

  • 尽量减少后缀列表,不要将不可能存在的文件后缀配置进来
  • 出现频率越高的后缀尽量写到前面,比如可以将.js写在第一个
  • 业务代码中导入模块时,可以手动加上后缀导入,省去Webpack查找过程

module.noParse配置

module.noParse可以告诉Webpack忽略未采用模块系统文件的处理,可以有效地提高性能。比如常见的jQuery非常大,又没有采用模块系统,让Webpack解析这类型文件完全是浪费性能。

因此我们可以配置如下的module.noParse:

module.exports = {
  module:{
  	noParse:[/jQuery/]
  }
};

IgnorePlugin

在导入模块时,IgnorePlugin可以忽略指定模块的生成。比如moment.js在导入时会自动导入本地化文件,一般情况下几乎不使用而且又比较大,此时可以通过IgnorePlugin忽略对本地化文件的生成,减小文件大小。

module.exports = {
  plugins:[
    new webpack.IgnorePlugin(/\.\/local/, /moment/)
  ]
};

DllPlugin

使用过Windows操作系统的读者应该会经常看到以.dll扩展名的文件,这些文件叫做动态链接库,包含了其他程序或动态链接库的函数和数据。

Webpack的DllPlugin的思想是类似的,先将公共模块打包为独立的Dll模块,然后在业务代码中直接引用这些模块。采用DllPlugin之后会大大提升Webpack构建速度,原因在于,包含大量复用模块的动态链接库只需要编译一次,之后的构建中会直接引用这些构建好的模块。

在Webpack中使用动态链接库有以下两个步骤:

  1. 通过webpack.DllPlugin插件打包出Dll库
  2. 通过webpack.DllReferencePlugin引用打包好的Dll库

下面以React项目为例进行说明。

Dll库需要单独构建,因此我们需要一份单独的配置Webpack文件。

1.新建webpack.dll.config.js

const webpack = require('webpack');

module.exports = {
	entry:{
  	react: ['react', 'react-dom']
  },
  output:{
    filename: '_dll_[name].js', // 输出的文件名
    path: path.resolve(__dirname, 'dist'), // 输出到dist目录
    library: '_dll_[name]'
  },
  plugins: [
    // name要等于output.library里的name
    new webpack.DllPlugin({
      name: "_dll_[name]",
      path: path.resolve(__dirname, "dist", "manifest.json") // 清单文件路径
    })
  ]
};

2.编辑webpack.config.js

const webpack = require('webpack');

module.exports = {
	entry: './src/main',
  output:{
    filename: '[name].js', // 输出的文件名
    path: path.resolve(__dirname, 'dist'), // 输出到dist目录
  },
  plugins: [
    // 传入manifest.json
    new webpack.DllReferencePlugin({
      manifest: path.resolve(__dirname, "dist", "manifest.json") // 清单文件路径
    })
  ]
};

3.添加构建命令

{
  "scripts":{
 		"build-dll":"webpack --config webpack.dll.config.js",
    "build":"webpack"
  }
}

4.构建Dll

npm run build-dll

5.构建应用

npm run build

Dll需要先构建,否则应用将构建失败

HappyPack

Webpack默认情况下是单进程执行的,因此无法利用多核优势,通过HappyPack可以变成多进程构建,从而提升构建速度。下面我们一起来看看如何使用happypack来加速构建。

1.安装happypack

npm isntall happypack

2.编辑配置文件,需要将Loader配置到HappyPack插件中,由HappyPack对Loader进行调用。

const HappyPackPlugin = require('happypack');
const path = require('path');

module.exports = {
	entry: './src/main',
  output:{
    path: path.resolve(__dirname, 'build'),
    filename:'[name].js'
  },
  module:{
    rules:[
      {
        test:/\.js$/,
        use:'happypack/loader?id=js', // 配置id为js
        include:[
          path.resolve(__dirname,'src')
        ]
      },
      {
        test:/\.scss$/,
        use:'happypack/loader?id=scss', // 配置id为scss
        include:[
          path.resolve(__dirname,'src')
        ]
      },
      {
        test:/\.css$/,
        use:'happypack/loader?id=css', // 配置id为css
        include:[
          path.resolve(__dirname,'src')
        ]
      }
    ]
  },
  plugins:[
    new HappyPackPlugin({
      id:'js', // id为js的loader配置
      use:[
        {
          loader:'babel-loader',
          options:{
            plugins:['@babel/transform-runtime'],
            presets:['@babel/env']
          }
        }
      ]
    }),
    new HappyPackPlugin({
      id:'scss', // id为scss的loader配置
      use:['style-loader','css-loader','sass-loader']
    }),
    new HappyPackPlugin({
      id:'css', // id为css的loader配置
      use:['style-loader','css-loader']
    }),
  ]
};

Tree-Shaking

Tree-Shaking原始的本意是”摇动树“,这样就会将一些分支”摇掉“,从而减少主干大小。而Webpack中的Tree-Shaking是类似的,在Webpack项目中,有一个入口文件,相当于树的主干,入口文件又依赖了许多模块。实际开发中,虽然依赖了某个模块,但其实只使用了其中的部分代码,通过Tree-Shaking,可以将模块中未使用的代码剔除掉,从而减少构建结果的大小。

注意:只有使用ES6模块系统的代码,在mode为production时,Tree-Shaking才会生效。因此,在编写代码时尽量使用import/export的方式。

按需加载

在开发中,我们一般会将业务代码打包为app.js,其他第三方依赖打包为vendor.js。这样会有一个比较大的问题,如果依赖的第三方模块过多,vendor.js会越来越大,而在浏览器加载时需要完全加载完vendor.js才可以,这样就会造成无谓的等待,因为我们当前页面可能只使用了一部分代码。此时可以使用Webpack来实现按需加载,只有在真正用到这个模块时才会加载相应的js。

比如基于echarts开发了一个数据可视化页面,可以在这个路由组件下面使用异步的方式加载echarts的代码:

import('echarts').then(modules => {
  const echarts = modules.default;
  const chart = echarts.init(document.querySelector('#chart'));
});

不过使用按需加载时,构建代码中会包含Promise调用,因此低版本浏览器需要注入Promise的polyfill实现。

提取公共代码

Webpack4中可以将多个公共模块打包一份,减少代码冗余,Webpack4之前的版本是使用webpack内置的CommonsChunkPlugin实现的,Webpack4直接配置optimization即可。

module.exports = {
  optimization:{
    splitChunks:{
      cacheGroups:{
        common:{ // 应用代码中公共模块
          chunks: 'all',
          // 最小公共模块引用次数
          minChunks: 2
        },
        vendor:{ // node_modules中第三方模块
					test: /node_modules/,
          chunks: 'all',
          minChunks: 1
        }
      }
    }
  }
};

第三方库代码的变更一般比较少(通过package.json的版本可以指定依赖版本),因此构建出来的vendor.js基本不会变就可以利用浏览器的缓存机制进行缓存。

而应用代码的变更是比较频繁的,因此单独打包为common.js,浏览器可以单独缓存,如果应用代码发生变更,浏览器只用重新下载common.js文件,而不用重新下载vendor.js。

热更新

HMR(Hot Module Replacement)是Webpack提供的常用功能之一,它允许在运行时对模块进行修改,而无需刷新整个页面(LiveReload需要刷新页面才能加载),这样有以下优势:

  • 保留应用状态,比如使用Vue/React时如果使用LiveReload,组件状态全部丢失,而HMR不会
  • 只更新变更的内容,节省开发时间

使用以下配置即可打开内置的HMR功能:

const webpack = require('webpack');

module.exports = {
	devServer: {
    hot: true, // 启用热加载
    contentBase: './dist',
  },
  plugins:[
		new webpack.NamedModulesPlugin(), // 打印更新的模块路径
    new webpack.HotModuleReplacementPlugin() // 热更新插件
  ]
};

小结

本文我们对Webpack4最常用的性能优化技术进行了学习,这些优化方法对业务代码的侵入性非常小(只有按需加载优化会要求使用import()函数进行加载),在实际的开发中,可以结合这些技术进行针对性的优化,比如开发时编译慢,可能就需要使用HappyPack插件进行多进程编译以加快编译速度等等。

0.jpeg