zh_cn.md

vue-cli-plugin-dll

Vue CLI 3 plugin for Dll and DllReference

起步

确保安装的是 vue-cli 3.x.x 版本

$ vue -V

安装

$ vue add dll

# OR

$vue invoke dll

快速开始

1. 简单配置

// vue.config.js

 module.exports = {
    pluginOptions: {
        dll: {
            entry: ['vue', 'vue-router']
        }
    }
 }

2. 生成dll文件

$ npm run dll

#OR

$ npx vue-cli-service dll

配置参数

options

参数	类型/值集	描述	默认值	是否必填
entry	Object/Array/String	入口配置	null	true
open	Boolean	是否启用 DllReferencePlugin(默认自动识别)	true	false
output	Object	打包输出配置		false
output.path	String	打包后的vendor和manifest.json存放的目录	'yourProjectPath/public/dll'	false
inject	Boolean	自动将打包的vendor注入到index.html	true	false
cacheFilePath	String	将打包后的所有资源路径保存到一个文件(绝对目录路径)	'yourProjectPath/node_modules/vue-cli-plugin-dll/src'	false

> vue.config.js:
module.exports = {
  // Other options...

  pluginOptions: {
     dll: {
      // 入口配置
      entry: ['vue'],
      // 输出目录
      output: path.join(__dirname, './public/dll'),

      // 是否开启 DllReferencePlugin,
      // 默认情况下，插件没有检测到 vendor (执行 `npm run dll` 指令生成的 chunk 包)，会自动关闭。
      // 在有需要的情况下可以手动关闭插件，例如：
      // 1. 为了在开发环境使用vue代码中的提示，可配置只在生产环境开启分包模式，`open : process.env.NODE_ENV === 'production'`。
      // 2. 在构建目标(`target`)为 `node`，需要手动关闭 dll 插件。
      open: true,

      // 自动注入到 index.html
      // 在执行 `dev` , `build` 等其他指令时，程序会自动将 `dll` 指令生成的 `*.dll.js` 等文件自动注入到 index.html 中。
      inject: true,
    }
  }
}

更多示例

entry config

module.exports = {
  // Other options...

  pluginOptions: {
      dll: {
           // 单入口
          entry: ['vue', 'axios'],

          // 多入口
          entry: {
            vendorNameOne: ['vue-router'],
            vendorNameTwo: ['vue-vuex'],
         }
      }
   }
}

open config

增加 webpack.DllReferencePlugin 插件

module.exports = {
  // Other options...

  pluginOptions: {
      dll: {
          entry: ['vue'],
          // 只在生产环境加入 webpack.DllReferencePlugin 插件
          open: process.env.NODE_ENV === 'production',
      }
   }
}

inject config

是否自动将执行dll命令执行打包的vendor包自动注入到index.html中去

module.exports = {
  // Other options...

  pluginOptions: {
      dll: {
        entry: ['vue'],
        // 如果已经手动的在index.html 中引用了打包完成后的 vendor, 可以关闭注入。
        inject: false
      }
   }
}

output config

打包vendor文件输出配置

module.exports = {
  // Other options...

  pluginOptions: {
      dll: {
        entry: ['vue'],
        // 可以打包完的vendor文件放到指定的位置
        output: path.resolve(__dirname, './public/newDllDir')

        // or
        output: {
          path: path.resolve(__dirname, './public/newDllDir')
        }
      }
   }
}

cacheFilePath config

在了解这个配置之前，先简单了解一下vue-cli-plugin-dll的 vendor 文件获取机制，在获取 vendor 文件的时候有两种方式实现。

1. 在执行npm run dll 指令时，将构建生成的所有文件的路径存储在 cache.dll.json文件中，在执行注入时，获取缓存路径文件匹配所有的 vendor 文件。这个方式能准确获取最新一次打包生成的所有文件路径。
2. 通过输出（output）目录位置模糊匹配到目录中所有文件。这种方式会导致匹配到多余的文件（不是 dll 指令生成的文件），从而导致引用混乱。

插件采用第一种方式进行注入匹配。 但是： 在第一种方式的实现上，由于历史遗留问题，vue-cli-plugin-dll插件默认将文件存储在 vue-cli-plugin-dll的src目录下，这种情况会导致两个问题

1. 在线上部署机器中不存在缓存文件导致构建出现问题，
2. 在升级插件包的时候缓存丢失导致构建出现问题。

了解了手动注入的文件获取机制后，为了解决此项问题，插件加入了cache.dll.json文件目录路径的配置，该配置可以将npm run dll生成的cache.dll.json存放在指定位置，从而避免以上问题

module.exports = {
  // Other options...

  pluginOptions: {
      dll: {
        entry: ['vue'],
        // 目录的绝对路径
        cacheFilePath: path.resolve(__dirname, './public')
      }
   }
}

按需加载

由于预打包机制跟主打包机制是完全分割的，可采用另外一种方式进行模拟按需打包

在这个例子中，以elemnent-ui为示范，按需加载部分组件。

1. 新建一个element.js文件在项目中（此示例将element.js和main.js入口文件同级）

// 引入css
import 'element-ui/lib/theme-chalk/index.css'
// 需要在这里加载需要用到的组件
import  {Input} from 'element-ui'

const element = {
  install: function (Vue) {
    Vue.component(Input.name, Input)
  }
}
export default elemen

2. 在vue.config.js中加上配置

// vue.config.js
module.exports = {
  // 其他配置..

  pluginOptions: {
    dll: {
      entry: {
        // 新加的element.js文件路径
        index: ['./src/element.js'],
      }
    }
  },
}

3. 在入口文件 main.js 引入这个文件并注册

import element from './element.js'
Vue.use(element)

4. 执行： npn run dll

注意点：

1. 在使用这个按需加载方式之前，需确定好项目已经按照 elementUI 文档中建议，配置 babel-plugin-component。
2. 每一次有 element.js 有改动，需要重新执行指令 npm run dll, 生成最新的vendor。