Vue DLLPlugin是一個在Vue CLI項目中使用DLL的插件,可以大大提升構建速度和性能。在DLLPlugin的基礎上,Vue DLLPlugin 進行了再次封裝,使得在Vue CLI項目中使用更加方便快捷。
首先,我們需要先安裝Vue DLLPlugin。使用下面的命令進行安裝:
npm install vue-dllplugin -D
安裝完后,在vue.config.js文件中進行配置:
const VueDllPlugin = require('vue-dllplugin');
module.exports = {
configureWebpack: {
plugins: [
new VueDllPlugin({
dll: {
name: 'dll',
entry: ['vue', 'vue-router', 'vuex', 'axios', 'element-ui']
},
devServer: {
host: '127.0.0.1',
port: 8090
}
})
]
},
chainWebpack: config =>{
config.resolve.alias
.set('vue$', 'vue/dist/vue.esm.js')
.set('vue-router$', 'vue-router/dist/vue-router.esm.js')
.set('vuex$', 'vuex/dist/vuex.esm.js')
.set('axios$', 'axios/dist/axios.js')
.set('element-ui', 'element-ui/lib/index.js');
}
};
其中,配置選項有以下幾個:
name
:生成的DLL模塊名稱。entry
:需要生成DLL的依賴包,例如Vue、Vue Router、Vuex、axios和element-ui。devServer
:開發(fā)服務器配置。
最后,在項目中使用生成的DLL模塊:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>vue-dllplugin-demo</title>
</head>
<body>
<div id="app"></div>
<!-- 引入生成的DLL模塊 -->
<script src="/dll/vendor.dll.js"></script>
<!-- 引入應用程序代碼 -->
<script src="/js/app.js"></script>
</body>
</html>
以上就是Vue DLLPlugin的簡單用法,通過使用DLL,可以避免在每次構建中重新編譯依賴包,從而提高了構建速度和性能。