1.主要说明为什么要用dllplugin 由于项目巨大,用了很多第三方插件库,所以导致构建的速度特别慢,所以用到webpack中自带的dllplugin来提取第三方库,直接新建 webpack.config.dll.js来配置
const path = require('path')
const webpack = require('webpack')
const CleanWebpackPlugin = require('clean-webpack-plugin')
// dll文件存放的目录 const dllPath = 'public/vendor'
module.exports = {
entry: {
// 需要提取的库文件
vendor: ['handsontable', 'codemirror', 'chart.js', 'vue-grid-layout', 'elliptic', 'element-ui']
},
output: {
path: path.join(__dirname, dllPath),
filename: '[name].dll.js',
// vendor.dll.js中暴露出的全局变量名
// 保持与 webpack.DllPlugin 中名称一致
library: '[name]_[hash]'
},
plugins: [
// 清除之前的dll文件
new CleanWebpackPlugin(['*.*'], {
root: path.join(__dirname, dllPath)
}),
// 设置环境变量
new webpack.DefinePlugin({
'process.env': {
NODE_ENV: 'production'
}
}),
// manifest.json 描述动态链接库包含了哪些内容
new webpack.DllPlugin({
path: path.join(__dirname, dllPath, '[name]-manifest.json'),
// 保持与 output.library 中名称一致
name: '[name]_[hash]',
context: process.cwd()
})
] }
在 package.json文件的
scripts: {
// 增加配置
"build:dll": "webpack --config ./webpack.config.dll.js --mode production"
}
运行 npm run build:dll 命令会生成配置好出口的文件 vendor.dll.js 和 vendor-manifest.json
在 vue.config.js 中
new webpack.DllReferencePlugin({
context: process.cwd(),
manifest: require('./public/vendor/vendor-manifest.json')
})
配置好 现在已经可以提升你的构建速度了,我只是记录一下我的配置步骤,失败的话再慢慢来嘛!哈哈!
- dllplugin影响不能使用tooltip解决方案 然后涉及到 打包后 测试环境或者正式环境里 element-ui的 tooltip和表格的 show-overflow-tooltip不生效的问题, 只需要 在 webpack.config.dll.js文件里 的entry入口中 vendor数组里去掉‘element-ui’库,然后 npm run build:dll 重新生成 dll.js文件和manifest.json文件, 然后直接打包部署就完事啦! 如果还有其他方法欢迎留言呀!
