Webpack 优化指南：Loader、DLL、Tree Shaking与按需加载详解

前言

随着前端技术的飞速迭代，各类开发工具也日新月异。Vue、React等主流框架均提供了成熟的脚手架工具，极大简化了新项目的初始化过程。然而，这也导致开发者往往忽视了脚手架底层核心构建工具Webpack的优化配置。虽然脚手架已预设了基础环境，但在需要进行定制化性能调优时，若缺乏对Webpack优化机制的理解，将难以有效入手。本文将深入探讨Webpack优化的关键领域。

提升构建速度

构建速度提升

Loader配置优化

Loader优化

Loader是Webpack的核心特性之一。由于Webpack原生仅支持JavaScript，必须借助各类Loader来处理非JS模块。在基于Webpack搭建项目时，通常会配置如vue-loader、sass-loader、babel-loader等工具。以babel-loader为例，其具体配置如下：


module: {
 rules: [{
  test: /\.js$/,
  exclude: /node_modules/,
  loader: 'babel-loader?cacheDirectory=true',
  options: {
  presets: ['@babel/preset-env'],
  plugins: ['@babel/transform-runtime']
  }
 }]
 }

对于Loader而言，最常用的优化手段是利用exclude属性排除无需转译的文件，从而提升构建速度。上述配置通过exclude排除了node_modules目录下的JS文件转译。然而，这种方式的加速效果相对有限。
启用cacheDirectory可对babel-loader的转译结果进行缓存。在后续Webpack构建过程中，系统会优先尝试读取缓存，以避免高耗能的重新转译。cacheDirectory可指定具体缓存路径，若设为true，则默认使用node_modules/.cache/babel-loader作为缓存目录。
Babel在处理某些公共方法时会注入极小的辅助代码至每个所需文件，导致重复引入。此时，需引入transform-runtime插件，指示Babel使用runtime机制替代直接注入，从而优化代码结构。

第三方库处理策略

第三方库优化

Externals配置

利用Externals提升构建速度的原理是：在构建阶段不将指定的依赖包打包进bundle中，而是在运行时从外部获取依赖。具体配置示例如下：


externals : {
 vue : "Vue",
 vueRouter : "VueRouter",
 vueResource : "VueResource",
 vuex : "Vuex"
},
<script type="text/javascript" src="https//xxxx/vue.famliy.1.1.0.min.js"></script>

上述示例将Vue全家桶配置在externals中，并将压缩后的JS文件托管至CDN。这样既避免了构建时将文件打包进bundle，提升了打包速度，又利用CDN缓存提高了访问速度，实现了性能与体验的双重优化。

DllPlugin配置

DllPlugin的作用是将第三方依赖打包到单独的文件中，并生成一个映射JSON文件。生成的依赖库文件不会随业务代码的变更而重新打包，仅当依赖包自身发生变化时才需重新构建依赖库。具体配置步骤如下：


module.exports = {
 entry: {
 vendor: ['vue', 'vue-router', 'vue-resource', 'vuex']
 },
 output: {
 path: path.join(__dirname, 'dist'),
 filename: '[name].js',
 library: '[name]_hash',
 },
 plugins: [
 new webpack.DllPlugin({
  name: '[name]_[hash]',
  path: path.join(__dirname, 'dist', '[name]-manifest.json'),
  context: __dirname
 })
 ]
}

首先，需创建一个类似上述示例的DLL配置文件，并编译该文件以生成vendor.js及映射文件vendor-manifest.json。随后，在Webpack配置文件中引入DllReferencePlugin进行配置：


plugins: [
 new webpack.DllReferencePlugin({
  context: __dirname,
  manifest: require('./dist/vendor-manifest.json')
 })
 ]

完成上述配置后，DllPlugin即生效。配置过程相对简单，建议开发者动手实践以加深理解。

多线程加速方案

Happypack多线程加速

Happypack旨在解决Webpack单线程处理任务时的排队问题。它通过多线程并发处理任务来显著提升处理速度。具体配置示例如下：


const happypack = require('happypack')
// 创建并发池
const threadPool = happypack.ThreadPool({size: os.cpus().length})
module: {
 rules: [{
  test: /\.js$/,
  exclude: /node_modules/,
  loader: 'happypack/loader?id=happyBabel' // id对应happypack插件id
 }]
 },
plugins: [
 new happypack({
  id: 'happyBabel',
  threadPool: threadPool,
  loaders: ['babel-loader?cacheDirectory']
 })
 ],

减小构建体积

依赖体积分析

依赖分析工具

webpack-bundle-analyzer是一款广受欢迎的可视化工具，用于查看各包的大小及其相互依赖关系。其配置方式与其他插件类似，具体示例如下：


const bundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin
plugins: [
 new bundleAnalyzerPlugin()
 ],

Tree Shaking与代码压缩

Tree Shaking机制

Tree Shaking旨在移除JavaScript上下文中未被引用的代码。例如，若引用了包含众多方法的lodash库，但实际仅使用其中一两个方法，打包时若将所有方法打入bundle则会造成浪费。Tree Shaking的核心概念即为去除多余代码。简单示例如下：


import {plus} from './count'

console.log(plus(1, 2))


function plus(x, y) {
 return x + y
}
function minus(x, y) {
 return x - y
}
export {
 plus,
 minus
}


const path = require('path')

module.exports = {
 entry: {
 main: './src/index.js',
 },
 output: {
 path: path.join(__dirname, 'dist'),
 filename: '[name].js',
 },
 mode: 'development'
}

如上例所示，入口文件引入了count.js中的plus方法，期望仅引入该方法而非整个文件。然而，实际编译结果往往不尽如人意：

编译后的代码中包含了整个count.js文件。此时，启用Tree Shaking显得尤为必要。具体实施方法如下：

UglifyJsPlugin压缩

UglifyJsPlugin是常用的代码压缩插件，可在构建过程中删除冗余代码。在Webpack 4中，只需将mode设置为production即可自动启用该插件。若需手动配置Webpack 4中的UglifyJsPlugin，具体配置如下：


const UglifyJsPlugin = require('uglifyjs-webpack-plugin')
optimization: {
 minimizer: [
  new UglifyJsPlugin({
  parallel: true,
  cache: true,
  uglifyOptions: {
   compress: {
   drop_console: true,
   reduce_vars: true
   },
   output: {
   comments: false,
   beautify: false
   }
  }
  })
 ]
 }

在Webpack 4中，UglifyJsPlugin配置于optimization.minimizer中。配置过程简洁明了，建议开发者尝试实践。

动态按需加载

按需加载（动态import）

此处的import指Webpack支持的动态加载，语法与ES6动态加载一致，是官方推荐的按需加载方式。沿用前述Tree Shaking示例，若仅希望引入plus方法，具体使用方式如下：


import('./count.js').then((count) => {
 console.log(count.plus(1, 2))
})

只需将入口文件修改为上述形式，其余配置保持不变即可实现按需引入。在Vue项目中，路由的按需加载亦可采用此方式，简单示例如下：


function view (name) {
 return new Promise((resolve, reject) => {
 import('../views/' + name + '.vue')
  .then((res) => {
  resolve(res)
  }).catch(e => {
  reject('网络异常，请稍后再试')
  })
 }).catch(err => {
 throw new Error('err，组件加载失败')
 })
}

通过传入名称，动态引入对应目录下的视图文件。此为基本示例，具体使用形式需根据实际场景调整。

总结

本文从构建速度与代码体积两个维度，简要介绍了Webpack优化的多种方法。希望读者能动手实践，因为编程领域的真知往往源于实际操作。

以上即为本文的全部内容，希望能为各位的学习或工作提供参考。如有任何疑问，欢迎留言交流。感谢大家对本站的支持。

Webpack 构建优化实战：速度提升与体积减小