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%