splitChunks探索(一)

webpack.optimization.splitChunks: 用作代码分离和模块的去重提取

带着问题来探索,效率最高:

为什么要用splitChunks?

在看问题之前,先创建一个简单的项目结构来方便下面的探索.

|--node_modules
|--build           // 开发环境打包目录
|--src             // 源码目录
   |--app.html
   |--views
      |--shop.html
   |--js
      |--app.js
      |--shop.js
|--webpack.config.js
|--package.json

webpack.config.js

const path = require('path')
const webpack = require('webpack')
const HtmlWebpackPlugin = require('html-webpack-plugin');
const {CleanWebpackPlugin} = require('clean-webpack-plugin');

module.exports = {
  entry: {
    app: './src/js/app.js'
  },
  output: {
    path: path.join(__dirname, './build'),
    filename: 'js/[name].[contenthash:10].js'
  },
  module:{
    rules:[]
  },
  plugins:[
    new CleanWebpackPlugin(),
    new HtmlWebpackPlugin({
      title: 'app',
      filename: 'app.html',
      template: path.join(__dirname, './src/app.html')
    })
  ],
  mode: 'development',
}

• 问题1

在app.js中,引入loadsh库,此时运行 webpack命令进行打包,可以发现从app.js打包出来的app.xxxxx.js拥有552kb的大小,但实际上我再app.js里只有两行代码

// app.js
import _ from 'loadsh'
console.log('filename app.js')

默认打包

要解决这个问题,需要使用 splitChunks 插件来把loadsh提取成单独模块,只需要增加下面的简单配置:

// webpack.config.js
module.exports = {
  ...
  optimization:{
    splitChunks:{
      chunks: 'all'
    }
  }
  ...
}

使用splitChunks默认配置打包

发现app.xxxxx.js变小,同时多出来一个 vendors~app.xxx.js,查看vendors~app.xxx.js可以发现这是loash库的内容.

• 问题2

再添加一个入口(entry)配置,同样引入loadsh库,然后再注释掉上面写的optimization代码,运行webpack命令打包.
根据截图发现 app.xxxxx.js 和 shop.xxxxx.js 都是551kb,查看这两个生成的文件就可以发现,loadsh库被重复打包了

// webpack.config.js
module.exports = {
  ...
  entry: {
    app: './src/js/app.js',
    shop: './src/js/shop.js'
  },
  // optimization:{
  //   splitChunks:{
  //     chunks: 'all'
  //   }
  // }
  ...
}

// shop.js
import _ from 'loadsh'
console.log('filename shop.js')

默认打包

修改下webpack.config.js文件,使用 optimization 配置

// webpack.config.js
module.exports = {
  ...
  entry: {
    app: './src/js/app.js',
    shop: './src/js/shop.js'
  },
  optimization:{
    splitChunks:{
      chunks: 'all'
    }
  }
  ...
}

使用splitChunks默认配置打包

这次发现 app.xxxxx.js 和 shop.xxxxx.js 变小,同时多出来一个vendors~app~shop.xxxxx.js 文件,这是loadsh代码被提取成vendors~app~shop.xxxxx.js,同时解决了: app.js和shop.js重复引用loash打包后也被重复打包进app.xxxxx.js和shop.xxxxx.js文件内

更进一步探索

optimization.splitChunks探索(二)