webpack学习第十二步——代码分割

打包命令

• 为了development模式下也能很好观察打包的文件，我们在package.json中增加一个打包命令，不使用devServer

"scripts": {
    "dev": "webpack --config ./config/webpack.dev.js",
    "start": "webpack-dev-server --config ./config/webpack.dev.js",
    "build": "webpack --config ./config/webpack.prod.js"
}

index.js引入lodash

• 安装lodash

npm install lodash -D

• index.js使用lodash

import _ from  'lodash'

console.log(_.join(['a','b','c'],'***'))

• 打包后生成的文件很大

• 打包文件会很大，加载时间会很长，改了业务代码，重新访问我们的页面，又要重新加载这么大的文件内容

写代码时的代码分割

• 新建一个lodash.js文件

// 导入import 文件，并且将lodash挂载到window对象上
import _ from 'lodash'
window._ = _

• 修改index.js

// 不需要import lodash，可直接使用_
console.log(_.join(['a','b','c'],'***'))

• 修改webpack.common.js

// 打包的入口文件改为两个，单独打包lodash
entry: {
    lodash: './src/lodash.js',
    main: './src/index.js',
},

• main.js被拆成loadash.js 和 mian.js(业务代码)，浏览器并行加载两个文件，当业务代码发生变化，用户不需加载lodash，只需加载main.js

利用webpack实现代码分割

• 不需要开发者自己再写个lodash.js将lodash挂载到window，而是自动把类库拆分成一个文件
• 修改index.js

// 导入lodash
import _ from 'lodash'
console.log(_.join(['a','b','c'],'***'))

• 修改webpack.common.js

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

module.exports = {
    entry: {
         // 打包index.js文件
        main: './src/index.js',
    },
    module: {
        rules: [{
            test: /\.(jpg|png|gif)$/,
            use: {
                loader: "url-loader",
                options: {
                    name: '[name]_[hash].[ext]',
                    outputPath: 'images/',
                    limit: 2048
                }
            }
        },{
            test: /\.css$/,
            use: [
                'style-loader',
                'css-loader',
                'postcss-loader'
            ]
        },{
            test: /\.js$/,
            exclude: /node_modules/,
            loader: 'babel-loader',
        }]
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: 'src/index.html'
        }),
        new CleanWebpackPlugin({
            root: path.resolve(__dirname, '../')
        }),
    ],
    output: {
        path: path.resolve(__dirname, '../build'),
        filename: '[name].js'
    },
    optimization: {
    // 设置splitChunks
        splitChunks: {
            chunks: "all"
        }
    }
}

• 打包后index.js会自动变为两个文件，实现了自动的代码分割

异步import的代码分割

• 异步import需要引入官方的babel

npm install @babel/plugin-syntax-dynamic-import -D

• 修改babelrc

{
  "presets": [
    [
      "@babel/preset-env",{
        "targets": {
          "chrome": "67"
        },
        "useBuiltIns": "usage"
      }
    ],
    "@babel/preset-react"
  ],
  // 使用异步 import 插件
  "plugins": ["@babel/plugin-syntax-dynamic-import"]
}

• 修改index.js为异步import方式

function getComponent() {
    return import('lodash').then(({ default: _ }) => {
        var element = document.createElement('div')
        element.innerHTML =_.join(['a','b','c'],'***')
        return element
    })
}
getComponent().then(element => document.body.appendChild(element))

• 打包index.js会拆分成两个文件

• 打开index.html

• 可以指定生成的chunk文件的文件名

function getComponent() {
// 通过这种注解生成chunkname，将生成的chunk文件指定文件名为lodash
    return import(/* webpackChunkName:'lodash' */'lodash').then(( _ ) => {
        var element = document.createElement('div')
        element.innerHTML =_.join(['a','b','c'],'***')
        return element
    })
}
getComponent().then(element => document.body.appendChild(element))

splitChunks配置项

• 修改webpack.common.js

optimization: {
    splitChunks: {
        chunks: "all",
        cacheGroups: {
            vendors: false,
            default: false
        }
    }
}

• 打包生成的文件不再用vendors前缀

splitChunks默认配置项

optimization: {
    // splitChunks: {},
    // 等价于
    splitChunks: {
        chunks: 'async',
        minSize: 30000,
        maxSize: 0,
        minChunks: 1,
        maxAsyncRequests: 5,
        maxInitialRequests: 3,
        automaticNameDelimiter: '~',
        name: true,
        cacheGroups: {
            vendors: {
                test: /[\\/]node_modules[\\/]/,
                priority: -10
            },
            default: {
                minChunks: 2,
                priority: -20,
                reuseExistingChunk: true
            }
        }
    }
}

chunks配置

• 默认为async

  // 代码分割时只对异步代码生效，同步 import lodash 不进行代码分割
  chunks: 'async'
  

  • 避免受其他因素干扰我们将cacheGroups都先置为false,minSize 和 maxSize 都设置为0

  splitChunks: {
      chunks: 'async',
      minSize: 0,
      maxSize: 0,
      minChunks: 1,
      maxAsyncRequests: 5,
      maxInitialRequests: 3,
      automaticNameDelimiter: '~',
      name: true,
      cacheGroups: {
          // vendors: {
          //     test: /[\\/]node_modules[\\/]/,
          //     priority: -10,
          //     filename: "vendors.js"
          // },
          // default: {
          //     // minChunks: 2,
          //     priority: -20,
          //     reuseExistingChunk: true,
          //     filename: "common.js"
          // }
          vendors: false,
          default: false
      }
  }
  

  • 修改index.js为同步import方式

  import _ from 'lodash'
  
  var element = document.createElement('div')
  element.innerHTML =_.join(['a','b','c'],'***')
  document.body.appendChild(element)
  

  • 打包不会进行代码分割
  • 修改index.js为异步import方式

  function getComponent() {
      return import(/* webpackChunkName:'lodash' */'lodash').then(( _ ) => {
          var element = document.createElement('div')
          element.innerHTML =_.join(['a','b','c'],'***')
          return element
      })
  }
  getComponent().then(element => document.body.appendChild(element))
  

  • 打包时会进行代码分割

• 对同步异步都进行打包 (initial为对同步代码做分割)

  chunks: 'all'
  

  • 需要配合cacheGroups选项,否则同步import 仍旧不会进行代码分割

  cacheGroups: {
      vendors: {
      // node_modules里面的文件分割打到单独文件里
          test: /[\\/]node_modules[\\/]/,
          priority: -10
      },
      default: false
  }
  

  • 打包后代码被分割，vendors~main表示打包了vendors文件，入口是main
  • 可以修改vendors文件的文件名

  vendors: {
      test: /[\\/]node_modules[\\/]/,
      priority: -10,
      // 文件名为vendors.js(异步import不可用)
      filename: "vendors.js"
  },
  

  • 打包后文件名为vendors.js

• 非node_module库的import

  • 新建a.js

  export default {
      num : 1
  }
  

  • index.js导入a.js

  import a from './a'
  console.log(a.num)
  

  • 符合代码分割后会走到cacheGroups，因为不在node_modules里，所以不会走vendros，而是走到default配置，因此我们需要修改cacheGroups

  cacheGroups: {
      vendors: {
          test: /[\\/]node_modules[\\/]/,
          priority: -10,
          filename: "vendors.js"
      },
      default: {
          priority: -20,
          reuseExistingChunk: true,
      }
  }
  

  • 打包后a.js会被打包到default~main.js中
  • default设置filename

  default: {
      priority: -20,
      reuseExistingChunk: true,
      filename: "common.js"
  }
  

minSize 配置

• 默认引入的模块大于30000个字节才做split

minSize: 30000

• 上例中引入a.js，设置minSize后打包，就不会进行代码分割

• 将minSize改为minSize: 1后打包会进行代码分割，生成common.js文件

maxSize 配置

• 配置maxSize,限定最大值，超过就会进行二次拆分

// 引入的模块大于1个字节才做split
minSize: 1,
// 引入的a.js限定了最大值，超过就会对文件进行二次拆分
maxSize: 2,

• 打包后commin.js被二次拆分

• 一般不使用

minChunks

• minChunks表示一个代码至少被引用过多少次才进行代码分割
• 修改minChunks的值

minChunks: 2

• index.js引用lodash

• 打包的代码不会进行代码分割

• 新建other.js，在改文件中也引用lodash
• webpack.common.js中对other.js也进行打包操作

entry: {
    main: './src/index.js',
    other: './src/other.js'
}

• 此时lodash会被分割出来，vendors_mainother表示main和other都引用了该文件

多个文件

• main.js引入了lodash,other.js引入了lodash和jquery, a.js引入了jquery,这个时候如果cacheGroups还设定fileName会发生冲突

• 将filename改为name,lodash和jquery都打到了vendors.js文件中

vendors: {
    test: /[\\/]node_modules[\\/]/,
    priority: -10,
    name: "vendors"
}

• 注释掉name,会分割为vendors~a~other.js和vendors~main~other.js

vendors: {
    test: /[\\/]node_modules[\\/]/,
    priority: -10,
    //name: "vendors"
}

其他配置

• 其他配置

// 同时加载的模块数最多5个，超过5个不做代码分割
maxAsyncRequests: 5,
// 入口文件引入的文件最多三个代码分割
maxInitialRequests: 3,
// 生成文件名称连接符
automaticNameDelimiter: '~',
// cacheGroups 里 filename 有效
name: true,

• cacheGroups的配置

default: {
    // minChunks: 2,
    // 优先级低于-10，所以node_modules里面用vendors
    priority: -20,
    // 一个模块已经被引用过，就直接复用，不用再打包
    reuseExistingChunk: true,
    filename: "common.js"
},