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%