vue cli的實(shí)用性大家都已經(jīng)深刻體會(huì)過(guò)了，但是你有沒(méi)有使用過(guò)vue cli的dllplugin呢？它可以提高大型項(xiàng)目的構(gòu)建速度，讓你的應(yīng)用程序的加載速度更加快速。下面讓我們一起來(lái)了解一下dllplugin的使用方法吧！

第一步，首先安裝依賴項(xiàng)：

npm install add-asset-html-webpack-plugin

第二步，在`vue.config.js`文件中進(jìn)行如下配置：

const webpack = require('webpack')
const AddAssetHtmlPlugin = require('add-asset-html-webpack-plugin')
module.exports = {
configureWebpack: {
plugins: [
new webpack.DllReferencePlugin({
context: process.cwd(),
manifest: require('./public/vendor/vendor-manifest.json')
}),
new AddAssetHtmlPlugin({
filepath: require.resolve('./public/vendor/vendor.dll.js')
})
]
}
}

第三步，使用`vue-cli-service build --mode development`命令構(gòu)建應(yīng)用程序。由于DllPlugin的使用，這個(gè)構(gòu)建速度會(huì)非常快！

最后，如果你想使用其他的依賴包進(jìn)行DllPlugin構(gòu)建，只需在`vue.config.js`文件中進(jìn)行如下配置：

const webpack = require('webpack')
module.exports = {
configureWebpack: {
plugins: [
new webpack.DllPlugin({
context: process.cwd(),
name: '[name]_library',
path: './public/vendor/[name].manifest.json',
}),
]
}
}

總之，如果你的應(yīng)用程序變得越來(lái)越大，使用DllPlugin可以讓你的構(gòu)建過(guò)程更加高效快捷。希望本文能幫助到你，謝謝！