应用场景

用来提高编译速度、加载速度。

原理

当有几个项目都依赖同一个或几个固定依赖的时候，可以把它们单独分离出来打包成基础框架代码，如vue、vue-router、vuex等，这样也可以把业务代码和基础依赖代码分离开来，大幅提高编译速度，由于基础依赖代码更新的频率非常低，所以只要浏览器访问一次，就会缓存下来这个文件，下次访问引用了这个依赖的项目就会直接读取本地缓存，从而达到加快加载速度的目的。

实践

分包插件

分包需要单独写一个webpack配置文件，分包主要用到的就是一个webpack的内置插件——DllPlugin

const webpack = require('webpack')
const path = require('path')
module.exports = {
  entry: {
    library: [
      'vue',
      'vue-router',
      'vuex',
    ]
  },
  output: {
    filename: '[name].dll.js',
    path: path.join(__dirname, 'build/library'),
    library: '[name]',
  },
  plugins: [
    new webpack.DllPlugin({
      name: '[name]',
      context: __dirname,
      path: path.join(__dirname, 'build/library/[name].json')
    })
  ],
  mode: 'production'
}

引用分包的插件

引用分包的插件主要用webpack内置插件——DllRefrencePlugin

module.exports = {
    // ...基础配置省略
    plugins: [
        new webpack.DllReferencePlugin({
          manifest: require('./build/library/library.json')
        }),
    ]
}

需要注意的一点：引入分出来的基础library.js需要手动在index.html用script标签引入，如果有更好的方法，请私信我，谢谢。