在Vue項目中,通常我們會引入各種外部庫來擴展其功能。對于這些引入的外部庫,我們可以使用Vue提供的externals配置選項來告訴Vue將其視為外部依賴而不是打包進入我們的項目中。
在vue.config.js文件中,我們可以使用externals選項來配置:
module.exports = {
// ...
configureWebpack: {
externals: {
'moment': 'moment',
'lodash': {
commonjs: 'lodash',
amd: 'lodash',
root: '_'
}
}
}
}
代碼中的例子中,我們將moment和lodash庫配置為外部依賴。對于moment庫,我們只需告訴Vue直接使用全局變量moment即可;而對于lodash庫,我們需要通過commonjs、amd以及root三種方式來告訴Vue該如何獲取該庫。
配置完成后,我們的打包文件中將不再包含這些庫的代碼,而是通過外部依賴的形式從CDN或者其他存儲庫中獲取。這樣可以大大減少我們的打包文件大小,同時也提高了加載速度。