vue-lice3项目利用DLLPlugin 和 DLLRe组件，大幅提高wbpack打包速度

webpack文档

官方描述如下，注意按看usage部分内容

DLLPlugin 和 DLLReferencePlugin 用某种方法实现了拆分 bundles，同时还大大提升了构建的速度。

第一步-新建自定义的webpack打包配置

根目录下新建webpack.dll.conf.js

const fs = require('fs')
const path = require('path')
const webpack = require('webpack')
const { CleanWebpackPlugin } = require('clean-webpack-plugin')
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
const vendors = [
  [
    'vue', 'vuex', 'vue-resource','echarts','element-ui','fabric','html2canvas','qrcode.vue','vue-router','vue-class-component','vue-lazyload','js-cookie'
  ],
  //  [
  //   'echarts'
  // ], [
  //   'element-ui'
  // ],[
  //   'fabric','html2canvas','qrcode.vue'
  // ]
]

// dll文件存放的目录
const dllPath = './build/dll'
module.exports = {
  entry: { // 多入口，单入口情况，只需写一个，key值自定义，value值为数组
    // vue: vendors[0],
    // echarts: vendors[1],
    // elementUI: vendors[2],
    libs: vendors[0],
  },
  output: {
    path: path.join(__dirname, dllPath),
    filename: '[name].[chunkhash].dll.js',
    library: '[name]_[chunkhash]'
  },
  plugins: [
    // 清除之前的dll文件
    new CleanWebpackPlugin(),
    // new UglifyJsPlugin(),
    new webpack.DllPlugin({
      path: path.join(__dirname, dllPath, '[name]-manifest.json'),
      name: '[name]_[chunkhash]',
      context: __dirname
    })
  ]
}

第二步-新增指令

修改package.json，新增npm run dll指令

  "scripts": {
    "clean": "rimraf node_modules",
    "dll": "webpack -p --progress --config ./webpack.dll.conf.js",
    "dev": "vue-cli-service serve",
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build --mode pro --report-json",
    "buildtest": "vue-cli-service build --mode test",
    "lint": "vue-cli-service lint",
    "push": "node ./push.js"
  },

第三步-修改vue-cli配置

3.需要修改下根目录下vue.config.js，如果没有自己建一个

// vue.config.js
const environment = require('./build/environment.ts')
const webpack = require('webpack')
const AddAssetHtmlPlugin = require('add-asset-html-webpack-plugin')
const path = require('path')

module.exports = {
  // options...
  publicPath: process.env.NODE_ENV === 'production' ? './' : '/',
//重点在这里
  configureWebpack:(config)=>{
    if(process.env.NODE_ENV === 'production'){

      config.plugins.push(
        // 引用动态链接库
        new webpack.DllReferencePlugin({
          manifest: path.resolve(__dirname, "./build/dll/libs-manifest.json")
        })
      )
      config.plugins.push(
        // 将 dll 注入到 生成的 html 模板中
        new AddAssetHtmlPlugin({
          // dll文件位置
          filepath: path.resolve(__dirname, './build/dll/*.js'),
          // dll 引用路径
          publicPath: 'dll',
          // dll最终输出的目录
          outputPath: 'dll'
        })
      )
    }

   
  },
  devServer: {
    proxy: {
      '/api': {
        target: 'https://newo2o.bafangka.com/api', // 'https://new401t.bafangka.com/api',
        changeOrigin: true,
        // http2: true,
        ws: true,
        pathRewrite: {
          '^/api': ''
        }
      }
    }

  }

}

效果

编译时间减少66%